Bootstrap Grid System
The grid is the backbone of every Bootstrap layout. It splits the page into 12 flexible columns and lets you arrange content into neat rows that automatically adjust to any screen size. Once you understand containers, rows, and columns, you can build almost any layout.
Container, row, column
Every grid layout follows the same three-level structure. A .container (or .container-fluid) holds everything and centres it. Inside it you place a .row, and inside each row you place .col elements. Columns must always live inside a row, and rows inside a container.
Two equal columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">Left half</div>
<div class="col">Right half</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>When you use plain .col, Bootstrap shares the space equally. Two columns each take half the width; three columns each take a third. You do not have to do any maths, the columns divide the row for you.
The 12-column system
Every row is 12 units wide. To set a specific width, use .col-{number}, where the number is how many of the 12 units the column should span. As long as the numbers in a row add up to 12, the columns fit perfectly on one line.
A wide column beside a narrow one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-8">Main content (8 of 12)</div>
<div class="col-4">Sidebar (4 of 12)</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Gutters: the space between columns
Bootstrap adds a gap called a gutter between columns automatically. You can control it with .g-* classes on the row, from .g-0 (no gap) up to .g-5 (large gap).
Controlling the gutter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row g-4">
<div class="col-6">Column A</div>
<div class="col-6">Column B</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Grid structure at a glance
Exercise: Bootstrap Grid System
When you apply .col-md-6, at which viewport widths does that 6-column sizing actually take effect?
