Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Column Sizes in Bootstrap 5
Column Sizing: Control column widths using Bootstrap's 12-column grid system.
Understanding the 12-Column Grid
Bootstrap's grid system uses 12 columns as a standard. You can specify how many columns each element should span.
The 12-Column Visualization
1
2
3
4
5
6
7
8
9
10
11
12
Each block represents 1 column (8.33% width)
1
Column
= 8.33% width6
Columns
= 50% width8
Columns
= 66.66% width12
Columns
= 100% widthBasic Column Sizes
Common Column Widths
Half-Width Columns
.col-6 (50%)
.col-6 (50%)
Third-Width Columns
.col-4 (33.33%)
.col-4 (33.33%)
.col-4 (33.33%)
Quarter-Width Columns
.col-3
.col-3
.col-3
.col-3
Mixed Column Sizes
.col-8 (66.66%)
.col-4 (33.33%)
All Column Size Combinations
Complete Column Size Chart
| Class | Columns | Width | Percentage | Example |
|---|---|---|---|---|
.col-1 | 1 of 12 | 1/12 | 8.33% | |
.col-2 | 2 of 12 | 2/12 | 16.67% | |
.col-3 | 3 of 12 | 3/12 | 25.00% | |
.col-4 | 4 of 12 | 4/12 | 33.33% | |
.col-5 | 5 of 12 | 5/12 | 41.67% | |
.col-6 | 6 of 12 | 6/12 | 50.00% | |
.col-7 | 7 of 12 | 7/12 | 58.33% | |
.col-8 | 8 of 12 | 8/12 | 66.67% | |
.col-9 | 9 of 12 | 9/12 | 75.00% | |
.col-10 | 10 of 12 | 10/12 | 83.33% | |
.col-11 | 11 of 12 | 11/12 | 91.67% | |
.col-12 | 12 of 12 | 12/12 | 100.00% |
Responsive Column Sizes
Breakpoint-based Sizing
Example: Different Sizes on Different Screens
Responsive
Responsive
Responsive
Responsive
| Screen Size | Classes Applied | Result |
|---|---|---|
| Extra Small (<576px) | col-12 | Full width (1 per row) |
| Small (≥576px) | col-sm-6 | 50% width (2 per row) |
| Medium (≥768px) | col-md-4 | 33% width (3 per row) |
| Large (≥992px) | col-lg-3 | 25% width (4 per row) |
Complex Responsive Example
.col-12 .col-md-8
Full on mobile, 66.66% on desktop
Full on mobile, 66.66% on desktop
.col-6 .col-md-4
50% on mobile, 33.33% on desktop
50% on mobile, 33.33% on desktop
Column Size Combinations
Asymmetric Layouts
.col-4 (33%)
.col-8 (67%)
.col-2
.col-7
.col-3
Multiple Row Layouts
.col-9 (9 columns)
.col-3 (3 columns)
.col-3
.col-6
.col-3
Total columns in a row should not exceed 12, but you can have different combinations in different rows.
Practical Examples
Real-World Layouts
Blog Layout
Main Content Area
This takes 8 columns on medium screens and up, full width on mobile.
Sidebar
This takes 4 columns on medium screens and up, full width on mobile.
Dashboard Widgets
Widget 1
6 cols on mobile, 3 cols on desktop
Widget 2
6 cols on mobile, 3 cols on desktop
Widget 3
6 cols on mobile, 3 cols on desktop
Widget 4
6 cols on mobile, 3 cols on desktop
Product Grid
Product 1
Product 2
Product 3
Product 4
Product 5
Product 6
Column Size Best Practices
Choosing the Right Column Size
- Content-based sizing: Size columns based on content importance
- Responsive design: Always consider mobile-first approach
- Readability: Text columns should be 6-8 columns wide for optimal reading
- Visual hierarchy: Use larger columns for primary content
Common Patterns
- 8-4 split: Main content and sidebar
- 6-6 split: Equal halves for comparisons
- 4-4-4: Three equal columns for features
- 3-6-3: Balanced layout with centered content
- 9-3: Wide content with narrow sidebar
Common Mistakes to Avoid
- ❌ Exceeding 12 columns in a single row
- ❌ Using too many different column sizes in one layout
- ❌ Not testing responsive behavior
- ❌ Forgetting to account for gutters in calculations
- ❌ Using fixed sizes when auto layout would work better
Column Size Calculator
Column Width Calculator
123456789101112
.col-6
Width: 6/12 = 50% of container
Quick Reference
| Columns | Class | Width |
|---|---|---|
| Full width | .col-12 | 100% |
| Two thirds | .col-8 | 66.66% |
| Half | .col-6 | 50% |
| One third | .col-4 | 33.33% |
| One quarter | .col-3 | 25% |
