Bootstrap 3 breakpoints and media queries

Question

On the Bootstrap 3 media queries documentation it says:

We use the following media queries in our Less files to create the key breakpoints in our grid

Answer 1

You should be able to use those breakpoints if you use http://lesscss.org/ to build your CSS.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {  }

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

From https://getbootstrap.com/docs/3.4/css/#grid-media-queries

In fact @screen-sm-min is a variable than is replaced by the value specified in _variable when building with Less. If you don't use Less, you can replace this variable by the value:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

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

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

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

Bootstrap 3 officially supports Sass: https://github.com/twbs/bootstrap-sass. If you are using Sass (and you should) the syntax is a bit different.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { }

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) {  }