Templates - grid | MAC PARA

BOOTSTRAP - ROZDĚLENÍ DO SLOUPCŮ

Šablony

Poznámky

container, container-fluid - zabalení obsahu, může po něm následovat nadpis atp., je důležité jej použít také pro odsazení atp.
row - pokud použijeme row, tak musí následovat col, mezi row a col nesmí nic být
col - 12 sloupců, do col se může dát další row

2 SLOUPCE | 6/6 | Text/Text

Sloupec 1 - text

Sloupec 2 - text

<div class="row">
<div class="col-12 col-md-6 ">Sloupec 1 - text</div>
<div class="col-12 col-md-6">Sloupec 2 - text</div>
</div>

2 SLOUPCE | 6/6 | Text/Obrázek

Sloupec 1 - text

<div class="row">
<div class="col-12 col-md-6">Sloupec 1 - text</div>
<div class="col-12 col-md-6"><img class="img-fluid" src="/media/2208/web-under-construction.jpg" alt="obrázek" /></div>
</div>

2 SLOUPCE | 6/6 | Obrázek+Zoom/Text

Sloupec 2 - text

<div class="row">
<div class="col-12 col-md-6">
<div class="zoom-it">
<a href="/media/2208/web-under-construction.jpg" title="Text pod obrázkem">
<img class="img-fluid" src="/media/2208/web-under-construction.jpg" alt="" />
</a>
</div>
</div>
<div class="col-12 col-md-6">
Sloupec 2 - text
</div>
</div>

2 SLOUPCE | 6(6/6)/6 | (Obrázek+Crop/Obrázek+Crop) + společný popis/Obrázek + popis

Popis platný pro oba obrázky, šedý

Popis obrázku, šedý

<div class="row">
<div class="col-12 col-md-6">
<div class="row">
<div class="col-6"><img class="img-fluid" src="/media/2208/web-under-construction.jpg?&mode=crop&width=357&height=427" alt="" /></div>
<div class="col-6"><img class="img-fluid" src="/media/2208/web-under-construction.jpg?&mode=crop&width=357&height=427" alt="" /></div>
<div class="col-12">
<p class="text-center py-2 color-gray-5">Popis platný pro oba obrázky, šedý</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<img class="img-fluid" src="/media/2208/web-under-construction.jpg" alt="" />
<p class="text-center py-2 color-gray-5">Popis obrázku, šedý</p>
</div>
</div>

SLOUPCE | 6/6 | Figure + Figcaption, Figure + Figcaption

<div class="row">
<div class="col-12 col-md-6">
<figure>
<img class="img-fluid" src="/media/2208/web-under-construction.jpg" alt="" />
<figcaption class="text-center py-2 color-gray-5">Popisek obrázku</figcaption>
</figure>
</div>
<div class="col-12 col-md-6">
<figure>
<img class="img-fluid" src="/media/2208/web-under-construction.jpg" alt="" />
<figcaption class="text-center py-2 color-gray-5">Popisek obrázku</figcaption>
</figure>
</div>
</div>

Vybrat obrázek, použít class img-fluid

Varinata 1
Ručně v HTML - class img-fluid:
<img src="/media/2208/web-under-construction.jpg" class="img-fluid" />

Varinata 2
Přes editor - vybrat obrázek - z menu Formats vybrat Img Fluid - pak se doplní span:
<span class="img-fluid"><img src="/media/2208/web-under-construction.jpg" /></span>
Výsledek by měl být stejný jako ve variantě 1