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 |