How to create a Responsive Sidebar in Bootstrap? Last Updated : 30 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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.PreviewResponsive Sidebar in BootstrapApproachBootstrap'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:output: Responsive sidebar in bootstrap Comment More infoAdvertise with us Next Article How to make Responsive Carousel in Bootstrap ? S skaftafh Follow Improve Article Tags : Web Technologies Bootstrap Geeks Premier League Bootstrap-Questions Bootstrap-5 Geeks Premier League 2023 +2 More Similar Reads How to Create a Responsive Table in Bootstrap ? A responsive table in Bootstrap adjusts its layout to fit different screen sizes, ensuring readability and usability on all devices. It typically involves using classes like .table-responsive or custom CSS to enable horizontal scrolling on smaller screens.Table of Content Using the table-responsive 4 min read How to Create Responsive Divs in Bootstrap ? To create responsive divs in Bootstrap, utilize the grid system with container and row classes. Define columns using col classes and specify breakpoints for different screen sizes. This ensures divs adjust their layout and size responsively across devices. Below are the approaches to creating respon 2 min read How to create a navbar in Bootstrap ? Bootstrap Navbar is a navigation header that is located at the top of the webpage which can be extended or collapsed, depending on the screen size. Bootstrap Navbar is used to create responsive navigation for our website. We can create standard navigation bar with <nav class="navbar navbar-defaul 2 min read Create Responsive Sidebar Menu to Top Navbar in Bootstrap Bootstrap's responsive sidebar streamlines navigation across devices. It features links to the Home, About Us, and Contact Us sections. The page displays sample content like images and welcoming messages, ensuring user-friendly browsing experiences. By toggling seamlessly, users can access informati 5 min read How to make Responsive Carousel in Bootstrap ? Bootstrap Responsive Carousel simplifies the creation of responsive carousels for dynamic content display. Utilize the Carousel component with a suitable HTML structure, ensuring proper sizing and responsive breakpoints for optimal display across devices. ApproachCreate an HTML document with Bootstr 2 min read How to Create Scrollable Sidebar with Icons in Bootstrap 5 ? To create a scrollable sidebar with icons in Bootstrap 5, we can use the Bootstrap grid system for layout, incorporating a container, row, and column structure. Place your sidebar content inside a div with the appropriate classes to control its appearance. Use Bootstrap's utility classes and icon li 2 min read Like