Bootstrap breakpoints are predefined screen sizes that enable responsive design across devices. The 5 breakpoints in Bootstrap 5 are: 1. xs (extra small,

Bootstrap breakpoints are predefined screen sizes that allow you to control how your layout and content adapt across different devices. They are the foundation of Bootstrap’s responsive design system, enabling you to build layouts that automatically adjust for mobile phones, tablets, desktops, and larger screens.

Each breakpoint corresponds to a minimum viewport width, and they’re used in CSS classes, Sass variables, and utility mixins to apply responsive styles.

The 5 Bootstrap Breakpoints (as of Bootstrap 5)

Bootstrap 5 uses five main breakpoints, each with a specific naming convention and screen width:

• xs (extra small) – Default; for screens less than 576px (no prefix needed)
• sm (small) – ≥576px
• md (medium) – ≥768px
• lg (large) – ≥992px
• xl (extra large) – ≥1200px
• xxl (extra extra large) – ≥1400px

These breakpoints are used in class names to control visibility and grid column behavior. For example:

<div class="col-md-6 col-lg-4">Content</div>

This means:

• On medium screens (≥768px), take 6 out of 12 columns (half width)
• On large screens (≥992px) and up, take 4 columns (one-third width)

Common Uses of Breakpoints

• Grid System: Define how many columns an element spans at different screen sizes.
• Responsive Utilities: Show or hide content based on screen size:

  <p class="d-none d-md-block">Visible only on medium and larger screens</p>

• Custom CSS: Use Sass or media queries to write responsive styles:

  @include media-breakpoint-up(lg) {
    .custom-class {
      font-size: 20px;
    }
  }

  Key Tips

  • Breakpoints are inclusive — md applies to medium and all larger screens unless overridden.
  • Mobile-first approach: Start styling for small screens, then use breakpoints to adjust for larger ones.
  • You don’t need to remember exact pixel values — just use the prefixes (sm, md, etc.) in your class names.

  Basically, Bootstrap breakpoints make it easy to create flexible, responsive designs without writing complex media queries from scratch.

  The above is the detailed content of What are Bootstrap breakpoints?. For more information, please follow other related articles on the PHP Chinese website!