Bootstrap Grid Basic
Bootstrap's grid uses rows and columns. A .row goes inside a .container. Columns use .col-* classes. The grid has 12 columns — you can split a row into halves (.col-6 + .col-6), thirds (.col-4), or any combo that adds to 12.
Grid Basic
Bootstrap's grid uses rows and columns. A .row goes inside a .container. Columns use .col-* classes. The grid has 12 columns — you can split a row into halves (.col-6 + .col-6), thirds (.col-4), or any combo that adds to 12.
Columns automatically stack on small screens unless you set larger breakpoint classes.
Real-life example: A 12-column grid is like a chocolate bar with 12 pieces. You can break off 6+6 for two friends, or 4+4+4 for three equal shares.
<div class="container">
<div class="row">
<div class="col-6 bg-primary text-white p-3">Half</div>
<div class="col-6 bg-secondary text-white p-3">Half</div>
</div>
<div class="row mt-2">
<div class="col-4 bg-info p-3">One third</div>
<div class="col-4 bg-info p-3">One third</div>
<div class="col-4 bg-info p-3">One third</div>
</div>
</div>Gutters and nesting
Rows have negative margins; columns have padding (gutters). Use .g-0 to remove gutters, or .gx-* / .gy-* for horizontal or vertical spacing.
You can put a .row inside a .col to nest grids — useful for complex layouts.
Real-life example: Gutters are the gap between photo frames on a wall. Nested rows are like putting a small shelf inside one big cupboard compartment.
<div class="container">
<div class="row g-4">
<div class="col-8">
<div class="row">
<div class="col-6 border p-2">Nested A</div>
<div class="col-6 border p-2">Nested B</div>
</div>
</div>
<div class="col-4 border p-2">Sidebar</div>
</div>
</div>