Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Rows & Columns in Bootstrap 5
Rows and Columns are the fundamental building blocks of Bootstrap's grid system.
Understanding Rows
What is a Row?
A row is a horizontal container for columns. It uses Flexbox to create horizontal layout.
Column inside row
<div class="container">
<div class="row">
<!-- Columns go here -->
</div>
</div>Row Properties
- Flex container: Uses
display: flex - Flex wrap: Columns wrap to next line when needed
- Negative margins: Compensates for column padding
- Horizontal alignment: Control with utility classes
- Vertical alignment: Align columns vertically
Note: Rows have
margin-left: -12px and margin-right: -12px to offset column padding.Understanding Columns
Column Basics
Columns are children of rows. They hold your actual content.
Column
<div class="row">
<div class="col">Content</div>
</div>Column Padding
Columns have built-in horizontal padding (gutters).
Content with padding
padding-left: 12pxpadding-right: 12px
Column Width
Columns use flexbox to determine width based on class.
50% width
50% width
col-* classes set flex-basis and max-width.
Row Examples
Different Row Configurations
Example 1: Basic Row with Equal Columns
Column 1
Column 2
Column 3
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>Example 2: Row with Mixed Column Sizes
Main Content (8 cols)
Sidebar (4 cols)
<div class="row">
<div class="col-8">Main Content</div>
<div class="col-4">Sidebar</div>
</div>Example 3: Multiple Rows
Row 1
Row 2
<div class="container">
<div class="row mb-3">Row 1</div>
<div class="row">Row 2</div>
</div>Column Examples
Column Width Variations
Equal Width Columns
.col
.col
.col
Specific Width Columns
.col-12 (100%)
.col-6 (50%)
.col-6 (50%)
.col-4 (33%)
.col-4 (33%)
.col-4 (33%)
Mixed Column Widths
.col-2
.col-8
.col-2
Row Alignment
Vertical Alignment
Align columns vertically within a row.
Centered
Classes:
align-items-startalign-items-centeralign-items-end
Horizontal Alignment
Align columns horizontally within a row.
Centered
Classes:
justify-content-startjustify-content-centerjustify-content-endjustify-content-betweenjustify-content-around
Column Self Alignment
Align individual columns differently.
Top
Middle
Bottom
Classes:
align-self-startalign-self-centeralign-self-end
Row Gutters
Gutter Spacing Options
No Gutters
No gap
No gap
g-0Large Gutters
Large gap
Large gap
g-4Horizontal Gutters Only
Horizontal gap
Horizontal gap
gx-4Vertical Gutters Only
Vertical gap
Vertical gap
gy-4| Class | Horizontal Gap | Vertical Gap |
|---|---|---|
g-0 | 0px | 0px |
g-1 | 0.25rem (4px) | 0.25rem (4px) |
g-2 | 0.5rem (8px) | 0.5rem (8px) |
g-3 | 1rem (16px) | 1rem (16px) |
g-4 | 1.5rem (24px) | 1.5rem (24px) |
g-5 | 3rem (48px) | 3rem (48px) |
Responsive Rows and Columns
Breakpoint-based Columns
Responsive
Responsive
Responsive
Responsive
| Screen | Class Applied | Result |
|---|---|---|
| Mobile (<576px) | col-12 | 1 per row (stacked) |
| Small (≥576px) | col-sm-6 | 2 per row |
| Medium (≥768px) | col-md-4 | 3 per row |
| Large (≥992px) | col-lg-3 | 4 per row |
Row and Column Nesting
Nested Grids
Main Column
Nested Column 1
Nested Column 2
Sidebar
<div class="row">
<div class="col-8">
<div class="row"> <!-- Nested row -->
<div class="col-6">Nested 1</div>
<div class="col-6">Nested 2</div>
</div>
</div>
<div class="col-4">Sidebar</div>
</div>Note: When nesting, you don't need to add another container. Just add a new row inside a column.
Practical Examples
Blog Layout
Blog Post
Main content area
Sidebar
Related links, ads, etc.
<div class="row">
<div class="col-md-8">Main Content</div>
<div class="col-md-4">Sidebar</div>
</div>Dashboard Cards
Card 1
Card 2
Card 3
Card 4
<div class="row g-3">
<div class="col-sm-6 col-lg-3">Card 1</div>
<div class="col-sm-6 col-lg-3">Card 2</div>
<div class="col-sm-6 col-lg-3">Card 3</div>
<div class="col-sm-6 col-lg-3">Card 4</div>
</div>Best Practices
Row Best Practices
- Always place rows inside a container
- Use
g-*classes for consistent spacing - Use alignment classes for precise layouts
- Keep rows as direct children of containers
Column Best Practices
- Always place columns inside rows
- Use responsive column classes
- Keep total column units ≤ 12 per row
- Use
mb-*for vertical spacing between rows - Avoid fixed heights on columns
Common Mistakes
- ❌ Placing columns outside of rows
- ❌ Placing rows outside of containers
- ❌ Using too many nested grids
- ❌ Forgetting to close row/column tags
- ❌ Using fixed pixel widths instead of grid
