Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Auto Layout Columns in Bootstrap 5
What is Auto Layout?
Auto layout columns automatically adjust their width based on the content inside them and the available space, without specifying exact column numbers.
Traditional Grid
Specify exact column widths:
col-4 col-md-6 col-lg-3Auto Layout
Let Bootstrap decide:
col col-md-autoBasic Auto Layout Columns
Equal Width Columns
<div class="row">
<div class="col">Auto width</div>
<div class="col">Auto width</div>
<div class="col">Auto width</div>
</div>.col (without a number) makes columns equal width, dividing available space equally.Auto Layout Examples
Example 1: Setting One Column Width
<div class="row">
<div class="col">Auto</div>
<div class="col-6">Fixed 6 cols</div>
<div class="col">Auto</div>
</div>The two .col divs will share the remaining space equally after the fixed .col-6 takes its 50% width.
Example 2: Variable Content Columns
<div class="row">
<div class="col">Short</div>
<div class="col">Long content...</div>
<div class="col">Medium</div>
</div>All columns remain equal width regardless of content length because .col uses flexbox equal distribution.
Column Auto Sizing
Using .col-auto
<div class="row">
<div class="col-auto">Sized to fit content</div>
<div class="col">Takes remaining space</div>
</div>.col-auto sizes the column based on its content width, while .col (without auto) grows to fill available space.Breakpoint-based Auto Layout
Responsive Auto Layout
<div class="row">
<div class="col-md-auto">Auto width on medium+</div>
<div class="col">Fluid width</div>
</div>On medium screens and larger, the first column sizes to its content, and the second takes the remaining space. On mobile, both become full width.
Another Example:
<div class="row">
<div class="col-12 col-md-3">Fixed width</div>
<div class="col">Takes remaining</div>
<div class="col-auto">Sized to content</div>
</div>Practical Auto Layout Patterns
Navigation Bar
<div class="row align-items-center">
<div class="col-auto">Logo</div>
<div class="col">Search (fills space)</div>
<div class="col-auto">Profile</div>
</div>Form Layout
<div class="row g-2 align-items-center">
<div class="col-auto">Label</div>
<div class="col">Input field</div>
<div class="col-auto">Button</div>
</div>Auto Layout with Flex Utilities
Combining with Flexbox
<div class="d-flex">
<div class="flex-grow-1">Grows to fill</div>
<div>Fixed width</div>
</div>Comparison: Auto vs Fixed Layout
| Scenario | Auto Layout | Fixed Layout |
|---|---|---|
| Navigation bars | ✅ Perfect | ❌ Rigid |
| Form layouts | ✅ Flexible | ⚠️ Can work |
| Card grids | ⚠️ Might work | ✅ Better |
| Dashboard widgets | ❌ Not ideal | ✅ Perfect |
| Blog content | ⚠️ Depends | ✅ Consistent |
Auto Layout Best Practices
When to Use Auto Layout
- When content width varies significantly
- For navigation bars and headers
- Form layouts with labels and inputs
- When you want "just enough" space for content
- For responsive designs that need flexibility
When NOT to Use Auto Layout
- Card grids or image galleries (use fixed columns)
- Data tables with consistent columns
- When precise control over widths is needed
- Complex multi-column layouts
- When design requires specific proportions
Common Auto Layout Patterns
Pattern 1: Logo - Nav - Actions
Common in headers and navigation bars.
Pattern 2: Label - Input - Button
Perfect for inline forms and search bars.
Pattern 3: Icon - Text - Badge
Used in list items, notifications, etc.
Pro Tip: Mix and Match
You can combine auto layout with fixed columns in the same row. Use .col-auto for content-based sizing, .col-* for fixed widths, and plain .col for filling remaining space.
