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

Popisek obrázku
Popisek obrázku
<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
FLY IN PEACE