How to create a Responsive Sidebar in Bootstrap?

Last Updated : 30 Jul, 2024

A responsive sidebar is a valuable component for web applications and admin panels that allows for efficient navigation while adapting to different screen sizes. To create a responsive sidebar in Bootstrap, use the navbar-expand-* classes along with Bootstrap's grid system to design a collapsible sidebar. Incorporate toggler buttons for smaller screens, ensuring seamless navigation across devices.

Preview

Approach

Bootstrap's grid system (container, row, and col) is utilized to create a flexible and responsive layout for the main content area. Bootstrap's breadcrumb component ("breadcrumb") is used to present hierarchical navigation.
Bootstrap's utility classes such as "p-0", "d-flex", "bg-success", "text-white", "d-md-none", etc., are applied to manage padding, flexbox, background colors, text colors, and responsiveness.
The offcanvas `component` is utilized for the sidebar, enabling its collapsible behavior on smaller screens. It's triggered by a button with data-bs-toggle="offcanvas".
Sidebar navigation is structured using Bootstrap classes like "nav", "nav-item", "nav-pills", "nav-column", etc., for arranging and styling the navigation items. Bootstrap's responsive classes like "d-md-none" and "d-flex" are used to manage the visibility of certain elements based on different screen sizes.

Example: This example illustrates the creation of a Responsive Sidebar in Bootstrap 5.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Bootstrap5 Sidebar</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity=
"sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" 
          crossorigin="anonymous">
    <link rel="stylesheet" 
          href="style.css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity=
"sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" 
        referrerpolicy="no-referrer" />
</head>

<body>

    <div class="container-fluid p-0 d-flex h-100">
        <div id="bdSidebar" 
             class="d-flex flex-column 
                    flex-shrink-0 
                    p-3 bg-success
                    text-white offcanvas-md offcanvas-start">
            <a href="#" 
               class="navbar-brand">
            </a><hr>
            <ul class="mynav nav nav-pills flex-column mb-auto">
                <li class="nav-item mb-1">
                    <a href="#">
                        <i class="fa-regular fa-user"></i>
                        Profile
                    </a>
                </li>

                <li class="nav-item mb-1">
                    <a href="#">
                        <i class="fa-regular fa-bookmark"></i>
                        Saved Articles
                        <span class="notification-badge">5</span>
                    </a>
                </li>
                <li class="nav-item mb-1">
                    <a href="#">
                        <i class="fa-regular fa-newspaper"></i>
                        Articles
                    </a>
                </li>
                <li class="nav-item mb-1">
                    <a href="#">
                        <i class="fa-solid fa-archway"></i>
                        Institutions
                    </a>
                </li>
                <li class="nav-item mb-1">
                    <a href="#">
                        <i class="fa-solid fa-graduation-cap"></i>
                        Organizations
                    </a>
                </li>

                <li class="sidebar-item  nav-item mb-1">
                    <a href="#" 
                       class="sidebar-link collapsed" 
                       data-bs-toggle="collapse"
                       data-bs-target="#settings"
                       aria-expanded="false"
                       aria-controls="settings">
                        <i class="fas fa-cog pe-2"></i>
                        <span class="topic">Settings </span>
                    </a>
                    <ul id="settings" 
                        class="sidebar-dropdown list-unstyled collapse" 
                        data-bs-parent="#sidebar">
                        <li class="sidebar-item">
                            <a href="#" class="sidebar-link">
                                <i class="fas fa-sign-in-alt pe-2"></i>
                                <span class="topic"> Login</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a href="#" class="sidebar-link">
                                <i class="fas fa-user-plus pe-2"></i>
                                <span class="topic">Register</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a href="#" class="sidebar-link">
                                <i class="fas fa-sign-out-alt pe-2"></i>
                                <span class="topic">Log Out</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
            <hr>
            <div class="d-flex">

                <i class="fa-solid fa-book  me-2"></i>
                <span>
                    <h6 class="mt-1 mb-0">
                          Geeks for Geeks Learning Portal
                      </h6>
                </span>
            </div>
        </div>

        <div class="bg-light flex-fill">
            <div class="p-2 d-md-none d-flex text-white bg-success">
                <a href="#" class="text-white" 
                   data-bs-toggle="offcanvas"
                   data-bs-target="#bdSidebar">
                    <i class="fa-solid fa-bars"></i>
                </a>
                <span class="ms-3">GFG Portal</span>
            </div>
            <div class="p-4">
                <nav style="--bs-breadcrumb-divider:'>';font-size:14px">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <i class="fa-solid fa-house"></i>
                        </li>
                        <li class="breadcrumb-item">Learning Content</li>
                        <li class="breadcrumb-item">Next Page</li>
                    </ol>
                </nav>

                <hr>
                <div class="row">
                    <div class="col">
                        <p>Page content goes here</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>

</html>

CSS

html, body {
    height: 100%;
    font-family: 'Ubuntu', sans-serif;
}

.gfg {
    height: 50px;
    width: 50px;

}

.mynav {
    color: #fff;
}

.mynav li a {
    color: #fff;
    text-decoration: none;
    width: 100%;
    display: block;
    border-radius: 5px;
    padding: 8px 5px;
}

.mynav li a.active {
    background: rgba(255, 255, 255, 0.2);
}

.mynav li a:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mynav li a i {
    width: 25px;
    text-align: center;
}

.notification-badge {
    background-color: rgba(255, 255, 255, 0.7);
    float: right;
    color: #222;
    font-size: 14px;
    padding: 0px 8px;
    border-radius: 2px;
}

Output:

out1 — output: Responsive sidebar in bootstrap

Mouth and Buccal Cavity

skaftafh

Improve

Article Tags :

How to create a Responsive Sidebar in Bootstrap?

Preview

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?