Bootstrap Grid Basics
Bootstrap's grid system uses rows and columns to lay out content responsively. It is built with flexbox and divides each row into 12 equal-width columns that you can combine as needed.
To use the grid, place a .row inside a .container, then place .col elements inside the row. Bootstrap automatically distributes the row's 12 columns evenly if you don't specify sizes.
<div class="container">
<div class="row">
<div class="col">Column</div>
</div>
</div>Rows and columns
A .row creates a horizontal group of columns, and .col elements inside it become the columns. Without a number, .col divides the space equally among all columns in the row.
The 12-column system
You can specify exact widths using classes like .col-4, meaning the column takes up 4 of the 12 available grid units (one third of the row).
<div class="container">
<div class="row">
<div class="col bg-primary text-white">Col 1</div>
<div class="col bg-secondary text-white">Col 2</div>
<div class="col bg-primary text-white">Col 3</div>
</div>
</div>Three equal-width colored columns side by sideWithout numbers, .col automatically splits the row into equal-width columns.
<div class="container">
<div class="row">
<div class="col-4 bg-success text-white">4 units</div>
<div class="col-8 bg-warning">8 units</div>
</div>
</div>One narrow column and one wider column, totaling 12 unitscol-4 and col-8 add up to 12, filling the row with a one-third and two-thirds split.
Key points
- The grid is based on 12 columns per row.
- Rows must be inside a container, and columns must be inside a row.
- .col without a number splits space equally.
- Numbered classes like .col-4 set an exact column width.