Přehled velikostí

Příklad použití

<div class="container">
  <div class="row">
    <div class="col-sm">
      První sloupec
    </div>
    <div class="col-sm">
      Druhý sloupec
    </div>
    <div class="col-sm">
      Třetí sloupec
    </div>
  </div>
</div>

Velikosti sloupců

Velikost sloupců nastavujeme pomocí vlastnosti col-. Automatická velikost pro všechny sloupce v jednom celku je 12.

Pokud sloupcům nenastavíme velikost, přizpůsobí se obsahu. Pokud máme dva sloupce a velikost nastavíme jen jednomu z nich, druhý se automaticky vypočítá (12 – velikost prvního sloupce). Velikosti sloupců můžeme kombinovat libovolně, všechny hodnoty v jednom celku však musí dávat 12.

Pokud máme tři sloupce a velikost nastavíme jednomu z nich, zbylá hodnota do dvanácti se rozdělí napůl mezi zbylé dva sloupce.

Pokud velikost nepotřebujeme nastavit, použijeme pouze col-.

 <div class="row">
  <div class="contacts col-4">
   <h3>Kontakty</h3>
   Naše firma, s.r.o.<br>
   Testovací 123, Praha
  </div>
  <div class="newsletter col-8">
   <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>
</div>

Automatická šířka sloupce

Díky příkazu col-velikost-auto můžeme sloupci nastavit automatickou šířku. Sloupec se přizpůsobí obsahu, který se v něm nachází.

<div class="container ">
  <div class="row">
    <div class="col-sm">
      První sloupec
    </div>
    <div class="col-sm-auto">
      Druhý sloupec
    </div>
    <div class="col-sm">
      Třetí sloupec
    </div>
  </div>
</div>

Sloupce v řádcích

Na začátek si také můžeme nadefinovat, kolik sloupců si v jednom řádku přejeme. Poté můžeme sloupce za sebe jednoduše psát bez jakýchkoliv dalších úprav.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Sloupec</div>
    <div class="col">Sloupec</div>
    <div class="col">Sloupec</div>
    <div class="col">Sloupec</div>
  </div>
</div>

U každého sloupce můžeme nastavení upravovat – můžeme říct velikost například jednomu z nich, nebo jim nastavit, jakou mají mít velikost na jaké velikosti zařízení.