Bootstrap tutorial

Breakpoints

Bootstrap uses breakpoints in class names that define the screens for which the style is designed. Thus you don't need to directly use the css @media rule to work screens.

If breakpoint does not specified in the class name, then style will be used for all screens from extra small screens to extra large screens. Thus Bootstrap has mobile-first approach.

List of breakpoints:

  1. empty value for extra small screens
  2. sm for larger mobile phones, i.e devices with resolutions ≥ 576px
  3. md for tablets, i.e devices with resolutions ≥ 768px
  4. lg for laptops, i.e devices with resolutions ≥ 992px
  5. xl for desktops, i.e devices with resolutions ≥ 1200px
  6. xxl for desktops, i.e devices with resolutions ≥ 1400px

You can assign classes for same style with different breakpoint.

<!-- Adds small margins for small screens and higher.
And for very large screens adds large margins. -->
<div class="m-1 m-xl-4">...</div>