Bootstrap 5 Sidebar Class With Code Examples

  • Updated
  • Posted in Programming
  • 6 mins read

Bootstrap 5 Sidebar Class With Code Examples

Hello everybody, In this publish, we’re going to take a look at how the Bootstrap 5 Sidebar Class drawback will be solved utilizing the pc language.

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto bg-light sticky-top">
            <div class="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top">
                <a href="/" class="d-block p-3 link-dark text-decoration-none" title="" data-bs-toggle="tooltip" data-bs-placement="proper" data-bs-original-title="Icon-only">
                    <i class="bi-bootstrap fs-1"></i>
                <ul class="nav nav-pills nav-flush flex-sm-column flex-row flex-nowrap mb-auto mx-auto text-center align-items-center">
                    <li class="nav-item">
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="proper" data-bs-original-title="Home">
                            <i class="bi-house fs-1"></i>
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="proper" data-bs-original-title="Dashboard">
                            <i class="bi-speedometer2 fs-1"></i>
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="proper" data-bs-original-title="Orders">
                            <i class="bi-table fs-1"></i>
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="proper" data-bs-original-title="Products">
                            <i class="bi-heart fs-1"></i>
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="proper" data-bs-original-title="Customers">
                            <i class="bi-people fs-1"></i>
                <div class="dropdown">
                    <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi-person-circle h2"></i>
                    <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3">
                        <li><a category="dropdown-item" href="#">New challenge...</a></li>
                        <li><a category="dropdown-item" href="#">Settings</a></li>
                        <li><a category="dropdown-item" href="#">Profile</a></li>
        <div class="col-sm p-3 min-vh-100">
            <!-- content material -->

The varied approaches to fixing the Bootstrap 5 Sidebar Class drawback are summarised within the following code.

<physique id="body-pd">
    <header class="header" id="header">
        <div class="header_toggle"> <i class="bx bx-menu" id="header-toggle"></i> </div>
        <div class="header_img"> <img src="" alt=""> </div>
    <div class="l-navbar" id="nav-bar">
        <nav class="nav">
            <div> <a href="#" class="nav_logo"> <i class="bx bx-layer nav_logo-icon"></i> <span class="nav_logo-name">BBBootstrap</span> </a>
                <div class="nav_list"> <a href="#" class="nav_link lively"> <i class="bx bx-grid-alt nav_icon"></i> <span class="nav_name">Dashboard</span> </a> <a href="#" class="nav_link"> <i class="bx bx-user nav_icon"></i> <span class="nav_name">Users</span> </a> <a href="#" class="nav_link"> <i class="bx bx-message-square-detail nav_icon"></i> <span class="nav_name">Messages</span> </a> <a href="#" class="nav_link"> <i class="bx bx-bookmark nav_icon"></i> <span class="nav_name">Bookmark</span> </a> <a href="#" class="nav_link"> <i class="bx bx-folder nav_icon"></i> <span class="nav_name">Files</span> </a> <a href="#" class="nav_link"> <i class="bx bx-bar-chart-alt-2 nav_icon"></i> <span class="nav_name">Stats</span> </a> </div>
            </div> <a href="#" class="nav_link"> <i class="bx bx-log-out nav_icon"></i> <span class="nav_name">SignOut</span> </a>
    <!--Container Main start-->
    <div class="height-100 bg-light">
        <h4>Main Components</h4>
    <!--Container Main end-->

By investigating quite a lot of use situations, we had been capable of show the way to clear up the Bootstrap 5 Sidebar Class drawback that was current.

Now that Bootstrap 5 has a Offcanvas part 👏, it is smart to discover constructing a Bootstrap 5 Sidebar. Sidebars are sometimes used for vertical navigation, however they’ll actually be used for any content material that is an apart to major content material.12-Apr-2021

Official Bootstrap documentation doesn’t comprise a Sidebar part, however it’s attainable to create fully-functional facet navigation from the prevailing elements, and with the little assist of Material Design for Bootstrap – free and powerfull UI KIT.

How do I create a vertical navigation bar in Bootstrap 5?

The fundamental vertical menu in bootstrap is just primarily based on . nav class. In the <ul> tag, class “nav navbar-nav” helps to make menu bar vertical. (*5*): The Default vertical menu in bootstrap takes house in any other case we have to use collapse class.


  • var btn = doc. querySelector(‘.toggle’);
  • var btnst = true;
  • btn. onclick = perform() {
  • if(btnst == true) {
  • doc. querySelector(‘.toggle span’). classList. add(‘toggle’);
  • doc. getElementById(‘sidebar’). classList. add(‘sidebarshow’);
  • btnst = false;
  • }else if(btnst == false) {

ml-auto class of Bootstrap 4 to align navbar objects to the precise. The . ml-auto class routinely provides a left margin and shifts navbar objects to the precise.02-Mar-2020

How do I create a sidebar in HTML and CSS?

You can add menu objects in that house if you would like.

  • Step 1: Create a fundamental html construction to create sidebars.
  • Step 2: Design the background utilizing css code.
  • Step 3: Add profile pictures and titles.
  • Step 4: Add menu objects within the sidebar.
  • Step 5: Design menu objects with css code.
  • Step 6: Create navigation bar.

  • Align Sidebar to the Right Using CSS Grid. .layout-container { show: grid; grid-template-columns: auto 25%; /*grid-template-columns: auto 300px;*/ grid-column-gap: 30px; }
  • Create a Right Sidebar Using Flexbox.
  • Make a Right Sidebar Using CSS Float.


  • top: 100%; /* 100% Full-height */ width: 0; /* 0 width – change this with JavaScript */ place: mounted; /* Stay in place */
  • padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px;
  • place: absolute; prime: 0; proper: 25px;
  • font-size: 20px; cursor: pointer; background-color: #111;

What is D flex in Bootstrap?

The Flexible Box Layout Module in bootstrap is used for designing the versatile and responsive format construction. It is utilized in Bootstrap 4. The d-flex class is used to create a easy flexbox container.28-Apr-2022

Leave a Reply