Bootstrap Grid Breakpoints
Breakpoints let you change column widths at different screen sizes, which is the key to responsive design. Bootstrap defines breakpoints named sm, md, lg, xl and xxl, each tied to a minimum viewport width.
You combine a breakpoint with a column class, like .col-md-6, meaning the column takes 6 of 12 units starting at the medium breakpoint and up. Below that breakpoint, it usually falls back to full width.
<div class="col-12 col-md-6 col-lg-4">...</div>Breakpoint sizes
sm starts at 576px, md at 768px, lg at 992px, xl at 1200px, and xxl at 1400px. Classes without a breakpoint name apply to all screen sizes (extra small and up).
Combining breakpoints
You can stack multiple breakpoint classes on one column, such as col-12 col-md-6 col-lg-4, to change its width at different screen sizes for a fully responsive layout.
<div class="container">
<div class="row">
<div class="col-12 col-md-6 bg-info text-white">Half on medium+</div>
<div class="col-12 col-md-6 bg-dark text-white">Half on medium+</div>
</div>
</div>Full-width stacked columns on phones, side-by-side halves on tablets and upcol-12 makes each column full width by default, and col-md-6 overrides that to half-width from md upward.
<div class="row">
<div class="col-6 col-lg-3 bg-secondary text-white">Quarter on lg+</div>
</div>The column takes half the row on small screens, one quarter on large screensAs the screen grows past the lg breakpoint, the column class overrides the smaller one.
Key points
- Breakpoints: sm (576px), md (768px), lg (992px), xl (1200px), xxl (1400px).
- Classes without a breakpoint apply to all sizes.
- You can stack multiple breakpoint classes for full responsiveness.
- Larger breakpoint classes override smaller ones as the screen grows.