Grid Breakpoints XS–XXL

Breakpoints XS–XXL

Bootstrap 5 breakpoints: xs (default, <576px), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px).

Class pattern: .col-{breakpoint}-{span}. Example: .col-lg-3 is 3 columns wide from lg and up; below lg it stacks unless you set .col-6 etc.

Real-life example: Breakpoints are like clothing sizes — same shirt design, but S, M, L, XL fit different body widths (screen widths).

• xs — phones portrait (no infix in class names)
• sm — large phones / small tablets
• md — tablets
• lg — laptops
• xl — desktops
• xxl — large monitors

Mixing breakpoint classes

Combine classes for fine control: .col-12 .col-sm-6 .col-xl-3 means full width on phone, half on sm, quarter on xl.

Use DevTools device toolbar (F12) to test each breakpoint while coding.

Real-life example: Mixing breakpoints is like planning a shop window — one big display on phone, two products on tablet, four on desktop.

<div class="container">
  <div class="row g-2 text-center">
    <div class="col-12 col-sm-6 col-lg-4 col-xxl-2 bg-info p-2">Item</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xxl-2 bg-info p-2">Item</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xxl-2 bg-info p-2">Item</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xxl-2 bg-info p-2">Item</div>
  </div>
</div>