Bootstrap Grid Breakpoints
Breakpoints are the screen widths where Bootstrap changes your layout. Each one has a short code you drop into column classes, like the md in .col-md-6. Learning the five breakpoints unlocks precise control over how a page looks on phones, tablets, and desktops.
The five breakpoints
Bootstrap 5 defines six tiers of screen size. The smallest, extra small, has no letter code because it is the default. The other five, sm, md, lg, xl, and xxl, each kick in at a minimum width and stay active for all larger screens.
Bootstrap 5 breakpoints
Using a breakpoint in a class
Insert the breakpoint code between col and the number. So .col-lg-3 means each column is three units wide, but only once the screen reaches the large breakpoint. Below that, the column falls back to full width.
Four columns on large 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-lg-3">Card 1</div>
<div class="col-lg-3">Card 2</div>
<div class="col-lg-3">Card 3</div>
<div class="col-lg-3">Card 4</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Breakpoints apply upward
A rule set at one breakpoint carries on to every larger breakpoint unless you override it. That is why you can set .col-sm-6 and it stays 6 wide on md, lg, and beyond too, until you add a new class like .col-lg-4 to change it.
Overriding at a higher 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-sm-6 col-lg-3">Half on tablets, quarter on desktops</div>
<div class="col-sm-6 col-lg-3">Half on tablets, quarter on desktops</div>
<div class="col-sm-6 col-lg-3">Half on tablets, quarter on desktops</div>
<div class="col-sm-6 col-lg-3">Half on tablets, quarter on desktops</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>- Extra small is the default and needs no code.
- The codes are sm, md, lg, xl, and xxl.
- Each breakpoint is a minimum width; rules apply upward.
- Breakpoints also work with utilities, like d-md-none to hide on medium screens.
