Responsive columns
Columns can change their width at different screen sizes by adding breakpoint classes.
In this page:
Syntax
<div class="row">
<div class="col-12 col-md-6 col-lg-4">column</div>
<div class="col-12 col-md-6 col-lg-8">column</div>
</div>Responsive columns
Start with the mobile layout using .col-12 or no breakpoint, then add .col-sm-*, .col-md-*, .col-lg-* and so on to change the width as the screen grows.
Classes are additive and cascade upward, so you only need to specify where the layout changes. Use row-cols-* to set columns per row for all children at once.
Note:
row-cols-2 row-cols-md-4 gives two columns on phones and four on tablets and up.
Example: Responsive columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container text-center">
<div class="row row-cols-2 row-cols-md-4 g-2">
<div class="col"><div class="bg-primary text-white p-3">1</div></div>
<div class="col"><div class="bg-primary text-white p-3">2</div></div>
<div class="col"><div class="bg-primary text-white p-3">3</div></div>
<div class="col"><div class="bg-primary text-white p-3">4</div></div>
</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Designing desktop-first
- Repeating classes for unchanged sizes
- Forgetting the small-screen default
Chapter Summary
- Mobile layout first
- Add breakpoint classes for larger screens
- Classes cascade upward
- row-cols sets columns per row
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: