Zde je malá ukázka jak zobrazit část kódu jen na mobilu. Pokud se k danému bloku přidá d-sm-none (responzivní třída) tak se tento blok skryje desktopu a bude se zobrazovat jen na mobilu.
<div class="row">
<div class="col-sm-1 d-block d-sm-none">
Zobrazit pouze na mobilních zařízeních
</div>
<div class="col-sm-11 d-block">
Zobrazit na všech zařízeních
</div>
</div>| Velikost obrazovky | Třída |
|---|---|
| Skrytá na všech | .d-none |
| Skryté pouze na xs | .d-none .d-sm-block |
| Skryté pouze na sm | .d-sm-none .d-md-block |
| Skryté pouze na md | .d-md-none .d-lg-block |
| Skryté pouze na lg | .d-lg-none .d-xl-block |
| Skryté pouze na xl | .d-xl-none .d-xxl-block |
| Skryté pouze na xxl | .d-xxl-none |
| Viditelné na všech | .d-block |
| Viditelné pouze na xs | .d-block .d-sm-none |
| Viditelné pouze na sm | .d-none .d-sm-block .d-md-none |
| Viditelné pouze na md | .d-none .d-md-block .d-lg-none |
| Viditelné pouze na lg | .d-none .d-lg-block .d-xl-none |
| Viditelné pouze na xl | .d-none .d-xl-block .d-xxl-none |
| Viditelné pouze na xxl | .d-none .d-xxl-block |