Bootstrap Stacked Horizontal
One of the grid's best tricks is being able to stack columns vertically on small phones but lay them out side by side on wider screens. This is the essence of responsive design, and Bootstrap makes it a matter of choosing the right column classes.
Stacked by default
If you use a breakpoint class like .col-md-6, the column is full width (stacked) on screens smaller than the breakpoint, and only becomes horizontal once the screen is wide enough. This gives you the popular mobile-first pattern: one column on phones, multiple columns on tablets and up.
Stack on mobile, side by side on medium screens
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">Stacks on phones, half width on tablets+</div>
<div class="col-md-6">Stacks on phones, half width on tablets+</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Resize your browser to see it in action. Below the md breakpoint the two blocks sit on top of each other; above it they line up in a row. You wrote no media queries, the class did the work.
Always horizontal
If you want columns to stay side by side even on the smallest phones, use the base .col or .col-{n} class with no breakpoint. Because it has no breakpoint, it applies at every screen size.
Horizontal on every screen
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4">Always one third</div>
<div class="col-4">Always one third</div>
<div class="col-4">Always one third</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Mixing behaviours per screen
You can combine classes to change the layout at each size. Here a column is full width on phones, half on tablets, and a third on large desktops, all at once.
A different width at each breakpoint
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">Responsive column</div>
<div class="col-12 col-md-6 col-lg-4">Responsive column</div>
<div class="col-12 col-md-6 col-lg-4">Responsive column</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>- A breakpoint class like .col-md-6 stacks below the breakpoint and goes horizontal above it.
- A plain .col-4 stays horizontal at every screen size.
- Stack multiple column classes to change layout per screen size.
- Bootstrap is mobile-first, so start with the smallest screen and work up.
