Bootstrap Interview Question:

Explain me how many different media queries are used by the Bootstrap grid system by default?

Submitted by: Muhammad

The Bootstrap grid system provides four tiers of classes: xs for phones (<768px), sm for tablets (≥768px), md for desktops (≥992px), and lg for large desktops (≥1200px). The hidden trick in this question is that there are only three media queries. Bootstrap is mobile first by design, so the default styles are for small devices, and media queries are then added on for larger screens, as follow in LESS code:

/* 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) { ... }
Submitted by: Muhammad