Skrytí a zobrazení na určité velikosti obrazovky

Pro div můžeme definovat, zda ho chceme na daném zařízení zobrazit, nebo ho zobrazit jen na jiných:

Skrytí

  <div class="d-none d-sm-none d-md-block">
   <h3>Odběr novinek a ceníků</h3>
   Přihlaste se k odběru a my Vám vždy zašleme informace  jako prvnímu.<br>
  </div>

Tento příklad nám zobrazí text jen na zařízení md a větším (tablet, notebook,…). Na xs (což je automatické) a sm se nezobrazí.

Jednoduchý příkaz je:

d-sm-none d-md-block

Do první části vepíšeme velikost, na které si text zobrazit nepřejeme a do druhé vepíšeme velikost, která ji následuje.

Zobrazení

  <div class="d-none d-lg-block d-xl-none">
   <h3>Odběr novinek a ceníků</h3>
   Přihlaste se k odběru a my Vám vždy zašleme informace  jako prvnímu.<br>
  </div>

Díky tomuto příkazu se nám text objeví jen na obrazovce lg (notebook, monitor).

Příkaz složíme ze tří částí. První bude většinou d-none (pokud nebudeme chtít zobrazit text jen na obrazovce xs, v tom případě by to bylo – d-block d-sm-none). Do druhé vepíšeme, na jaké velikosti text zobrazíme a do třetí opět tu velikost, která ji následuje, ale na ní si text už nepřejeme.

Zarovnání textu

Pro zarovnání použijeme tyto příkazy (pro Bootstrap 5, jinak vystřídáme „start“ za „left“ a „end“ za „right“):

<div class="row">
<div class="text-start col-4">
text zarovnaný vlevo
</div>

<div class="text-center col-4">
text zarovnaný na střed
</div>

<div class="text-end col-4">
text zarovnaný doprava
</div>
</div>

Výsledek bude vypadat takto: