Bootstrap Breakpoints

Bootstrap Breakpoints Overview

Bootstrap uses six breakpoints: the implicit xs (below 576px, no infix needed) and five named tiers—sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), and xxl (≥1400px). Classes without a breakpoint infix, like col-6, apply at all sizes, while classes with an infix, like col-md-6, apply from that breakpoint upward.

This mobile-first approach means you write your base styles for the smallest screens first, then layer on larger-breakpoint classes to progressively enhance the layout for bigger viewports, rather than the reverse.

Bootstrap Breakpoints Example

<div class="col-12 col-sm-6 col-md-4 col-lg-3">
  Responsive column: full width on mobile, half on sm,
  one-third on md, one-quarter on lg and up.
</div>

<div class="d-none d-lg-block">
  Only visible from the lg breakpoint upward.
</div>

<div class="d-block d-lg-none">
  Only visible below the lg breakpoint.
</div>

The column classes stack from smallest to largest breakpoint, each overriding the previous one as the viewport grows. The display utilities show the mobile-first pattern of hiding or showing elements only past a chosen breakpoint.

Top 10 Bootstrap Breakpoints Examples

These are the breakpoint-aware patterns you'll use constantly to build responsive layouts.

Popular Real-World Bootstrap Breakpoints Examples

These breakpoint-driven patterns solve everyday responsive design problems in production sites.

Best Practices

• Design mobile-first: write base classes for small screens, then add breakpoint-prefixed classes upward.
• Memorize the six breakpoint widths so you can predict behavior without checking docs constantly.
• Use consistent breakpoints across a project instead of mixing arbitrary custom media queries.
• Test layouts at each breakpoint boundary, not just common device widths.
• Prefer Bootstrap's breakpoint variables in custom Sass instead of hardcoding pixel values.
• Combine multiple responsive utilities (column size, display, text alignment) for cohesive behavior.
• Use the xl and xxl breakpoints sparingly; most layouts only need up through lg.

Common Mistakes

• Writing desktop-first CSS and trying to override it for mobile, fighting Bootstrap's mobile-first design.
• Confusing breakpoint direction, forgetting that md applies from 768px upward, not just at exactly 768px.
• Hardcoding custom media query pixel values that don't match Bootstrap's breakpoints, causing layout seams.
• Overusing d-none/d-block toggles instead of a single responsive layout that adapts naturally.
• Not testing the exact pixel boundaries where a breakpoint class starts applying.
• Assuming xs needs a class prefix, when it's actually the default with no infix.

Key Takeaways

• Bootstrap has six breakpoints: xs (default), sm, md, lg, xl, and xxl.
• Classes without an infix apply at all sizes; infixed classes apply from that size upward.
• The framework follows a mobile-first design philosophy.
• Breakpoints are consistent across grid, display, flex, and text utilities.
• Testing at each breakpoint boundary catches responsive bugs early.