Головна‎ > ‎Bootstrap 4‎ > ‎Контейнер‎ > ‎

Інші властивості

Без sm

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




col пропорційно займає місце, що залишилося

   <div class="row"
      <div class="col">1</div> 
      <div class="col-6">2</div> 
      <div class="col">3</div> 
   </div> 




На всю ширину

   <div class="row"
      <div class="col">1</div> 
      <div class="col">2</div> 
      <div class="w-100"></div> 
      <div class="col">3</div> 
      <div class="col">4</div> 
   </div> 




Текст при зростанні штовхає блоки, а потім прекидає їх вниз
(якщо ширина менше md, то блок auto і 2 сусіди стануть в стовпчик і розтянуться)

  <div class="row justify-content-md-center">
      <div class="col col-lg-2"  style="background-color:lavender;">1</div>
      <div class="col-md-auto">Текст, що штовхає блоки</div>
      <div class="col col-lg-2"  style="background-color:lavender;">2</div>
  </div>




Вирівнювання рядків по вертикалі


<div class="container">
  <div class="row align-items-start" style="height:70px;background-color:gold;">
    <div class="col">
      1
    </div>
    <div class="col">
      2
    </div>
    <div class="col">
      3
    </div>
  </div>
  <div class="row align-items-center"  style="height:70px;">
    <div class="col">
      а
    </div>
    <div class="col">
      б
    </div>
    <div class="col">
      в
    </div>
  </div>
  <div class="row align-items-end"  style="height:70px;background-color:gold;">
    <div class="col">
      1
    </div>
    <div class="col">
      2
    </div>
    <div class="col">
      3
    </div>
  </div>
</div>




Вирівнювання блоків по вертикалі


<div class="container">
  <div class="row" style="height:100px;">
    <div class="col align-self-start" style="background-color:gold;">
      1
    </div>
    <div class="col align-self-center" style="background-color:gold;">
      2
    </div>
    <div class="col align-self-end" style="background-color:gold;">
      3
    </div>
  </div>
</div>




Вирівнювання рядків по горизонталі


<div class="container">
  <div class="row justify-content-start">
    <div class="col-4" style="background-color:gold;">
      start
    </div>
    <div class="col-4" style="background-color:gold;">
      start
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4" style="background-color:gold;">
      center
    </div>
    <div class="col-4" style="background-color:gold;">
      center
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4" style="background-color:gold;">
      end
    </div>
    <div class="col-4" style="background-color:gold;">
      end
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4" style="background-color:gold;">
      around
    </div>
    <div class="col-4" style="background-color:gold;">
      around
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4" style="background-color:gold;">
      between
    </div>
    <div class="col-4" style="background-color:gold;">
      between
    </div>
  </div>
</div>




Порядок блоків

<div class="container">
  <div class="row">
    <div class="col">
      1
    </div>
    <div class="col order-12">
      2
    </div>
    <div class="col order-1">
      3
    </div>
  </div>
</div>


--------

<div class="container">
  <div class="row">
    <div class="col order-last">
      1
    </div>
    <div class="col">
      2
    </div>
    <div class="col order-first">
      3
    </div>
  </div>
</div>




Зробити відступ


<div class="container">
<div class="row">
  <div class="col-md-4" style="background-color:gold;">1</div>
  <div class="col-md-4 offset-md-4" style="background-color:gold;">2</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3" style="background-color:gold;">3</div>
  <div class="col-md-3 offset-md-3" style="background-color:gold;">4</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3" style="background-color:gold;">5</div>
</div>
</div>


--------

Прибрати відступ на більших екранах

<div class="container">
<div class="row">
  <div class="col-sm-5 col-md-6" style="background-color:gold;">1</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0" style="background-color:gold;">2</div>
</div>
</div>




Відштовхування блоків один від одного


<div class="container">
<div class="row">
  <div class="col-md-4" style="background-color:gold;">1</div>
  <div class="col-md-4 ml-auto" style="background-color:gold;">2</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto" style="background-color:gold;">3</div>
  <div class="col-md-3 ml-md-auto" style="background-color:gold;">4</div>
</div>
<div class="row">
  <div class="col-auto mr-auto" style="background-color:gold;">5</div>
  <div class="col-auto" style="background-color:gold;">6</div>
</div>
</div>




Інший рядок в болці


<div class="container">
<div class="row">
  <div class="col-sm-9" style="background-color:lightblue;">
1
<div class="row">
  <div class="col-9 col-sm-3" style="background-color:gold;">2</div>
  <div class="col-3 col-sm-9" style="background-color:gold;">3</div>
</div>
  </div>
</div>
</div>