Bootstrap 5 three column layouts divide content into three sections using the 12-column grid. This page covers 4 three-column patterns — equal thirds, sidebar+main+sidebar, responsive card grid and asymmetric layout.
Quick Setup
<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-4 | One-third width from md up |
.col-md-4.col-md-4.col-md-4 | Three equal columns |
.row-cols-md-3 | Three columns without individual col classes |
.col-md-2 .col-md-8 .col-md-2 | Narrow-wide-narrow pattern |
.col-md-3 .col-md-6 .col-md-3 | Sidebar-main-sidebar pattern |
.h-100 | Equal height columns |
.g-3 | 16px gutters between columns |
1. Bootstrap 5 Equal Three Column Layout
Three equal columns using col-md-4. Stacks to single column on mobile.
2. Bootstrap 5 Sidebar + Main + Sidebar Layout
Two narrow sidebars flanking a wide main content area — classic content + sidebars pattern.
3. Bootstrap 5 Responsive Three Column Grid
One column on mobile, two on tablet, three on desktop using Bootstrap responsive column classes.
4. Bootstrap 5 Asymmetric Three Column Layout
Unequal three columns: narrow left nav (col-2), wide main content (col-7), narrow right widget (col-3).
Frequently Asked Questions
Use three col-md-4 divs inside a row for equal thirds. Bootstrap's 12-column grid means 4+4+4=12 fills the full width. Add g-3 or g-4 to the row for gutters between columns.
Use col-md-4 instead of col-4. Without a breakpoint prefix, columns are fixed width at all sizes. col-md-4 means 4 columns (one-third) on medium screens and above, but full width (stacked) on small screens below 768px.
Bootstrap's row uses display:flex by default so all direct col children are the same height. Add h-100 to cards inside columns to make each card fill its column: <div class='col-md-4'><div class='card h-100'>.
row-cols-3 sets all child columns to one-third width automatically without adding col-4 to each: <div class='row row-cols-3'>. Combine with breakpoints: row-cols-1 row-cols-md-3 for stacked mobile and three columns on desktop.
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.