Bootstrap 5 two column layouts are the foundation of most web page designs. This page covers 4 two-column patterns — equal split, content+sidebar, wide sidebar and sticky sidebar — each ready to use directly.
Quick Setup
Layouts need only Bootstrap 5 CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Class | What It Does |
|---|---|
.col-md-6 | 50% width from md breakpoint |
.col-md-8 | 66% width — main content column |
.col-md-4 | 33% width — sidebar column |
.col-md-3 | 25% width — narrow sidebar |
.col-md-9 | 75% width — wide content area |
.g-4 | Gap between columns |
.h-100 | Full height column content |
.position-sticky | Sticky sidebar positioning |
.order-md-2 | Reorder columns at breakpoint |
1. Bootstrap 5 Equal Two Column Layout
Two equal columns using col-md-6. Stacks to single column on mobile automatically.
2. Bootstrap 5 Sidebar + Main Content Layout
A classic content + sidebar layout with col-md-8 for main content and col-md-4 for sidebar.
3. Bootstrap 5 Wide Sidebar Layout
Left sidebar with navigation using col-md-3, and main content with col-md-9.
4. Bootstrap 5 Sticky Sidebar Layout
Sidebar that sticks while scrolling using position-sticky. Main content scrolls normally.
Frequently Asked Questions
Use col-md-6 or col-md-8 col-md-4 — the md prefix means the column widths apply from 768px up. Below 768px both columns automatically become full width (col-12) and stack vertically. No extra CSS needed.
Add position-sticky and top value to the sidebar content: <div class='position-sticky' style='top:16px'>. The parent column must have enough height for sticking to work. Make sure no ancestor element has overflow: hidden as this breaks sticky positioning.
Use order utility classes: <div class='col-md-8 order-md-2'> and <div class='col-md-4 order-md-1'>. This reverses columns on desktop while keeping the natural order on mobile. Useful when you want the sidebar to appear after the main content on mobile.
Use offset or mx-auto: <div class='col-md-6 mx-auto'> or <div class='col-md-6 offset-md-3'>. Both result in a centered column. mx-auto works better when using responsive column sizes as it always centers regardless of column width.
Bootstrap 5 row uses display:flex by default, so all columns in a row are already equal height. To make the inner content fill the full column height add h-100 to the content div inside the column: <div class='col-md-6'><div class='card h-100'>.
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.