What is a break point in bootstrap

Breakpoints are triggers in Bootstrap that trigger layout changes in response to changes in device or viewport size.

Breakpoints are the cornerstones of responsive design. Use them to control when your layout can fit into a specific viewport or device size.

Use media query to build your CSS with breakpoints. Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most often use min-width in media queries.

Mobile First , Responsive design is what we need to achieve.
Bootstrap's CSS is designed to apply minimal styling to make the layout work at the smallest breakpoint, and then layer the styles to adjust the design for larger devices. This optimizes your CSS, reduces render times, and provides a great experience for your visitors.

Bootstrap includes six default breakpoints, sometimes called grid layers , for responsive builds. These breakpoints can be customized if you use our source Sass files.

The default media query in bootstrap:


Each breakpoint size is chosen to be a multiple of 12 and represents a subset of common device sizes and viewport sizes. They are not specific to every use case or device, but provide a scope that provides a strong and consistent foundation for building responsive apps.

Media queries

Since Bootstrap is modular first, we use some media queries to create reasonable breakpoints for our layout and interface. These breakpoints are primarily based on the minimum viewport width and allow us to zoom in on elements as the viewport changes.

The semantics of the following code are:

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Hides DOM elements with custom-class in case of default screen size i.e. x-small, min-width: 0. However, on sm and larger screens, use display:block to display.

Likewise, the semantics of the following code:

%cx-product-facet-navigation {
  min-width: 0;

  // hides the filter button in desktop experience
  @include media-breakpoint-up(lg) {
    button.dialog-trigger {
      display: none;
    }
  }
}

Hide the button button with dialog-trigger on the screen size represented by lg breakpoint.

More Jerry's original articles, all in: "Wang Zixi":