Bootstrap 5 Сітка

 

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


На всю ширину
container-fluid - на всю ширину


Стрибки F12 
sm - мобільні, горизонтально і вертикально
md - планшет
lg, xl, xxl - монітори

<div class="container">
  <div class="row">
    <div class="col-4 col-sm-12 col-md-4 col-lg-3 col-xl-2 col-xxl-1" style="background-color:#DAF7A6;">1</div>
    <div class="col-4 col-sm-12 col-md-5 col-lg-6 col-xl-8 col-xxl-9" style="background-color:#1AF7A6;">2</div>
    <div class="col-4 col-sm-12 col-md-3 col-lg-3 col-xl-2 col-xxl-1" style="background-color:#DAF7A6;">3</div>
  </div>
</div>

Сітка
Стовпчики
Відступи між блоками

 

 



Рядок
row justify-content-center - по центру
row justify-content-lg-center - після lg по центру

Клітинка
col py-2 - відступи по вертикалі
col px-2 - відступи по горизонталі
col d-flex justify-content-center - центр по горизонталі
col d-flex align-items-center  - центр по вертикалі