Інші властивості
Без 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>