Bootstrap 5 dashboard layouts combine a sidebar, top navbar and content area. This page covers 4 dashboard patterns — basic sidebar, dark sidebar, top navigation and mini icon sidebar.
Key Classes Reference
| Pattern | CSS Approach |
|---|---|
| Sidebar layout | display:flex on wrapper |
| Fixed sidebar width | width:240px; flex-shrink:0 |
| Content area | flex:1; overflow:auto |
| Sticky sidebar | position:sticky; top:0; height:100vh |
| Top nav layout | flex-direction:column on wrapper |
1. Bootstrap 5 Basic Dashboard Layout
Classic admin layout — fixed sidebar on left, top navbar and scrollable main content.
2. Bootstrap 5 Dark Sidebar Dashboard
Dashboard with a dark sidebar, light content area and brand color accent on active items.
4. Bootstrap 5 Mini Icon Sidebar Dashboard
Compact icon-only sidebar that saves horizontal space — common in dense admin UIs.
Frequently Asked Questions
Use CSS flexbox: a wrapper div with display:flex, a sidebar div with a fixed width (240px) and flex-shrink:0, and a main div with flex:1. The sidebar stacks vertically with its own nav links. The main area has a fixed header and scrollable content below.
Set position:sticky and top:0 on the sidebar with height:100vh: .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. This keeps the sidebar visible while the main content scrolls. Works without JavaScript.
Hide the sidebar on mobile and show a hamburger button. On small screens add d-none d-lg-flex to the sidebar. Show an off-canvas sidebar for mobile navigation: <div class='offcanvas offcanvas-start'>. Toggle it with a navbar button.
CSS Grid for the outer shell: grid-template-columns: 240px 1fr and grid-template-rows: 64px 1fr. Use Bootstrap's grid and utilities for the inner content layout. This gives you a proper two-dimensional layout for the app shell with Bootstrap handling component layouts inside.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.