How to create a responsive sidebar in Bootstrap
Using Bootstrap 5 to create responsive sidebars, it is recommended to use offcanvas components to achieve mobile-first sliding sidebars; 2. By combining display tool classes such as d-none d-md-block and position-fixed, you can realize the sidebar layout that is often displayed on the desktop and hidden on the mobile side; 3. You can also use Bootstrap's grid and folding classes to build a responsive layout stacked on a small screen; ultimately, you should test the response effect based on the device and ensure accessibility to provide a consistent user experience.
Creating a responsive sidebar in Bootstrap is straightforward, especially with Bootstrap 5's built-in components and utility classes. You can build a sidebar that collapses on smaller screens and expands on larger ones using a combination of layout classes, flex utilities, and responsive breakpoints.
Here's how to create a responsive sidebar using Bootstrap 5:
1. Basic Structure with Offcanvas (Recommended for Mobile-First)
For a truly responsive sidebar that works well on mobile, use Bootstrap's offcanvas component. It slides in from the side on small screens and can be shown statically on larger screens using media queries or custom logic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Sidebar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<!-- Toggle Button for Sidebar (visible on small screens) -->
<button class="btn btn-primary m-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar">
Toggle Sidebar
</button>
<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Sidebar</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<nav class="nav flex-column">
<a href="#" class="nav-link">Dashboard</a>
<a href="#" class="nav-link">Profile</a>
<a href="#" class="nav-link">Settings</a>
<a href="#" class="nav-link">Messages</a>
</nav>
</div>
</div>
<!-- Main Content -->
<main class="p-3">
<h1>Main Content</h1>
<p>This is the main content area. The sidebar will appear on small screens via offcanvas.</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>✅ This approach is mobile-friendly and accessible. On desktop, you can enhance it to show the sidebar permanently using custom CSS.
2. Persistent Sidebar on Desktop, Offcanvas on Mobile
To show the sidebar by default on medium and larger screens, but collapse it into offcanvas on mobile, you can combine Bootstrap's display utilities and a bit of custom CSS.
<!-- Responsive Sidebar: visible on md screens -->
<div class="d-none d-md-block" style="width: 250px;" id="desktopSidebar">
<div class="bg-light border-end h-100 position-fixed" style="width: 250px;">
<div class="p-3">
<h5>Sidebar</h5>
</div>
<nav class="nav flex-column p-3">
<a href="#" class="nav-link">Dashboard</a>
<a href="#" class="nav-link">Profile</a>
<a href="#" class="nav-link">Settings</a>
<a href="#" class="nav-link">Messages</a>
</nav>
</div>
</div>
<!-- Offcanvas for mobile -->
<button class="btn btn-primary d-md-none m-3" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar">
Menu
</button>
<div class="offcanvas offcanvas-start d-md-none" id="mobileSidebar">
<div class="offcanvas-header">
<h5>Sidebar</h5>
<button class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<nav class="nav flex-column">
<a href="#" class="nav-link">Dashboard</a>
<a href="#" class="nav-link">Profile</a>
<a href="#" class="nav-link">Settings</a>
<a href="#" class="nav-link">Messages</a>
</nav>
</div>
</div>
<!-- Main Content (adjusts for sidebar on desktop) -->
<main class="p-3" style="margin-left: 270px;">
<h1>Main Content</h1>
<p>This layout shows a permanent sidebar on desktop and offcanvas on mobile.</p>
</main>? Key points:
d-none d-md-block: hides sidebar on small screens, shows onmdand up.position-fixed: keeps the desktop sidebar fixed.margin-lefton main content: prevents overlap with the fixed sidebar.
3. Alternative: Using CSS Grid or Flex with Responsive Classes
You can also use Bootstrap's flex utilities to create a two-column layout that stacks vertically on small screens.
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
</ul>
</div>
</nav>
<!-- Main Content -->
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<h1 class="mt-4">Responsive Dashboard</h1>
<p>The sidebar collapses on mobile and expands on larger screens.</p>
</main>
</div>
</div>? Notes:
- The
collapseclass can be toggled via a button using JavaScript.- Use
col-md-*to control sidebar width on medium screens.- This method doesn't use offcanvas but relies on Bootstrap's grid and collapse.
Final Tips
- Always test responsiveness across devices using browser dev tools.
- Use
position-fixedcarefully — remember to offset main content so it doesn't hide behind the sidebar. - For accessibility, ensure toggle buttons have proper labels and keyboard support.
- Consider adding a backdrop or close-on-click behavior for mobile offcanvas.
Basically, Bootstrap gives you multiple ways to build a responsive sidebar. Use offcanvas for mobile-first apps, and combine it with fixed positioning and display utilities for a seamless desktop experience.
The above is the detailed content of How to create a responsive sidebar in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undresser.AI Undress
AI-powered app for creating realistic nude photos
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Popular tool
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
20519
7
13632
4
How to animate Bootstrap components for a more dynamic feel? (Advanced CSS)
Mar 13, 2026 am 01:13 AM
The fade and show classes of Bootstrap5 are only status markers and do not contain animation logic. You need to manually add @keyframes or transitions to achieve fade-in and fade-out; custom components need to configure additional animation rules, and when JS controls the display, the show class must be added with delay to ensure redrawing.
How to ensure your Bootstrap site is fully accessible (WCAG)? (Accessibility)
Mar 08, 2026 am 01:25 AM
The Bootstrap component does not automatically add the aria attributes required for complete WCAG. You need to manually complete aria-expanded, role="dialog", aria-labelledby, etc.; the form must be equipped with an explicit label; :focus needs to use :focus-visible to ensure that the keyboard focus is visible; the color contrast must reach 4.5:1.
How to create a professional-looking landing page with Bootstrap? (Project-Based)
Mar 10, 2026 am 12:22 AM
Bootstrap’sdefaultstylingfeelsgenericduetouncustomizedspacing,typography,andcolor—fixableviaCSSvariablesorSass,notdirectedits;avoidfixedwidths,misuseofgridclasses,andrender-blockingassetstoensureresponsivenessandfastLCP.
How to integrate Bootstrap with a JavaScript framework like React or Vue? (Integration)
Mar 12, 2026 am 01:22 AM
Only BootstrapCSS should be introduced in React/Vue instead of JS to avoid global style pollution and jQuery dependency; SCSS modules should be imported on demand to reduce the size; interactive functions must be imported with encapsulation libraries (such as react-bootstrap) or ESM; grid classes need to adapt to JSX/Vue syntax, and explicit and implicit classes should be used with SSR with caution.
How to implement a carousel or image slider with Bootstrap? (Content Display)
Mar 07, 2026 am 01:01 AM
Need not. Bootstrap5's carousel is automatically initialized by default. You need to manually call newbootstrap.Carousel() only when data-bs-ride is modified or the element is dynamically inserted.
How to properly install and set up Bootstrap 5 in your web project? (Getting Started)
Mar 16, 2026 am 12:40 AM
To correctly introduce Bootstrap5, you need to load bootstrap.min.css first, then load bootstrap.bundle.min.js (including Popper), and ensure that the viewport tag exists; after npm installation, you need to manually introduce compiled files in the dist directory. SCSS customization must be preceded by variable declarations, and JS components must be explicitly initialized to avoid jQuery contamination.
How to use Bootstrap utility classes to speed up your workflow? (Efficiency)
Mar 11, 2026 am 12:18 AM
Use mt-3 to represent the top margin, mb-3 to represent the bottom margin, and the suffixes t/b/s/e correspond to top/bottom/start/end respectively; ms-auto implements right alignment in the flex container, me-2 replaces the abandoned mr-2, and responsive classes such as mt-md-4 need to have breakpoint prefixes.
How to use Bootstrap variables to maintain a consistent color scheme? (Branding)
Mar 14, 2026 am 12:59 AM
The safest way is to redefine Bootstrap's Sass variables (such as $primary, $primary-rgb, $primary-text-emphasis) in advance and introduce them before @import "bootstrap/scss/variables" to ensure that all dependent variables are updated synchronously to avoid compilation failure or style exceptions.
