Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.

Detailed documentation and more examples you can find in our Bootstrap Breakpoints Docs

---

Breakpoint	Class infix	Dimensions
X-Small	None	0–576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Each breakpoint size was chosen to be a multiple of 12 and to be representative of a subset of common device sizes and viewport dimensions. They don’t specifically target every use case or device, but the provide ranges provide a strong and consistent foundation to build on for any nearly device.

Media queries

To apply bootstrap breakpoints in your project you can use the following media queries

      // X-Small devices (portrait phones, less than 576px)
      // No media query for `xs` since this is the default in Bootstrap

      // Small devices (landscape phones, 576px and up)
      @media (min-width: 576px) { ... }

      // Medium devices (tablets, 768px and up)
      @media (min-width: 768px) { ... }

      // Large devices (desktops, 992px and up)
      @media (min-width: 992px) { ... }

      // X-Large devices (large desktops, 1200px and up)
      @media (min-width: 1200px) { ... }

      // XX-Large devices (larger desktops, 1400px and up)
      @media (min-width: 1400px) { ... }