Bootstrap visualizzare la media query applicata
Con questo snippet inserito in una pagina html che usa Bootstrap, è possibile visualizzare quale media query viene applicata quando si ridimensiona la finestra:
HTML
<div>Bootstrap media query:
<h3 class="badge visible-xs-inline-block">XS</h3>
<h3 class="badge visible-sm-inline-block">SM</h3>
<h3 class="badge visible-md-inline-block">MD</h3>
<h3 class="badge visible-lg-inline-block">LG</h3>
</div>
- xs: applicata quando la larghezza della finestra è inferiore a 768px
- sm: applicata quando la larghezza della finestra è superiore a 768px
- md: applicata quando la larghezza della finestra è superiore a 992px
- lg: applicata quando la larghezza della finestra è superiore a 1200px