Breakpoints
Breakpoints are the screen widths at which the layout is allowed to change.
In this page:
Syntax
<div class="col-{breakpoint}-{number}">...</div>
<!-- breakpoints: sm, md, lg, xl, xxl -->Breakpoints
Bootstrap 5 has six responsive breakpoints:
Note:
- xs: under 576px (default, no infix)
- sm: 576px and up (.col-sm-)
- md: 768px and up (.col-md-)
- lg: 992px and up (.col-lg-)
- xl: 1200px and up (.col-xl-)
- xxl: 1400px and up (.col-xxl-)
- Classes without a breakpoint infix apply to all sizes. Design mobile-first.
Example: Breakpoints
<!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">
<div class="row text-center">
<div class="col-12 col-md-6 col-lg-3 bg-light border p-3">Full width on phones, half on md, quarter on lg</div>
<div class="col-12 col-md-6 col-lg-3 bg-light border p-3">Column 2</div>
<div class="col-12 col-md-6 col-lg-3 bg-light border p-3">Column 3</div>
<div class="col-12 col-md-6 col-lg-3 bg-light border p-3">Column 4</div>
</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Thinking md means only medium screens
- Designing desktop-first
- Forgetting classes cascade upward
Chapter Summary
- xs, sm, md, lg, xl, xxl
- Thresholds 576, 768, 992, 1200, 1400
- Mobile-first: min-width rules
- Classes apply from the breakpoint up
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: