Bootstrap Question:

Download Job Interview Questions and Answers PDF

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

Bootstrap Interview Question
Bootstrap Interview Question

Answer:

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) { ... }

Download Bootstrap Interview Questions And Answers PDF

Previous QuestionNext Question
Explain me how do you use the Dropdown plugin?Tell me what will be the output of the following HTML code:

<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<ul>
<li>Nested item 2.1</li>
<li>Nested item 2.2</li>
<li>Nested item 2.3</li>
</ul>
<li>Item 3</li>
</ul>