Pokud chcete uspořádat obázky, texty, tabulky a pod. vedle sebe, můžete využít třídu (class) bootstrapu pro uspořádání do mřížky. Tato metoda vytváří rozložení sloupců vedle sebe. Class používáme ve značce div. Zapíšeme ho ve tvaru
<div class="col-{zkratka velikosti kontejneru}-{počet dílů z 12}">Sem váš obsah</div>
Základní tabulka se využitelnými class je níže.
Podívejte se, jak aspekty systému mřížky Bootstrap fungují na více zařízeních - počítač, tablet, mobil. Záchytnou informací je šířka celého displeje (max. šířka šířka kontejneru). Zkratky celikosti kontejneru jsou xs, sm, md, lg, xl (1. řádek tabulk). Převod na px je v 2. řádku tabulky. V tabulce je rovněž
| Extra malé xs <576px |
Malé sm ≥576px |
Střední md ≥768px |
Velké lg ≥992px |
Extra velké xl ≥1200px |
|
|---|---|---|---|---|---|
| Max. šířka kontejneru | Žádné (auto) | 540px | 720px | 960px | 1140px |
| Předpona třídy v divu (předpona class) | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Celkem sloupců v kontejneru | 12 | ||||
| Šířka okraje před a za sloupcem | 15px na každé straně sloupce | ||||
<div class="container">
<div class="row">
<div class="col-sm-6">
1 of 2
</div>
<div class="col-sm-6">
2 of 2
</div>
</div>
<div class="row">
<div class="col-sm-4">
1 of 3
</div>
<div class="col-sm-4">
2 of 3
</div>
<div class="col-sm-4">
3 of 3
</div>
</div>
</div>Zobrazení