Grid System

Bootstrap grid uses:

12 columns
Flexbox

Basic Structure

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

Column Sizes

col-6
col-4
col-3

Responsive Grid

<div class="col-md-6 col-lg-4">

Meaning:

Medium screen → 6 columns
Large screen → 4 columns

Auto Columns

<div class="col">

Automatically shares space.

Row Gap & Column Gap

g-3
gx-4
gy-5

In this section