Bootstrap Grid Basics
The Bootstrap grid is a powerful, flexbox-based layout system that lets you arrange content into rows and columns that automatically adjust to screen size. Once you understand rows, columns, and the twelve-column model, you can build almost any responsive layout. This lesson walks through the essential structure step by step.
The three parts of the grid
Every grid layout uses three nested pieces: a container, one or more rows marked with .row, and columns marked with a .col class. Columns must always live inside a row, and rows must always live inside a container.
- Container (.container or .container-fluid) wraps everything.
- Row (.row) groups a set of columns horizontally.
- Columns (.col, .col-6, etc.) hold your actual content.
The twelve-column model
Each row is divided into 12 equal-width columns. You decide how many of those 12 units each column should span. For example, two .col-6 columns each take half the row (6 + 6 = 12), while three .col-4 columns each take a third.
Two equal halves using col-6
<!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-6">Left half</div>
<div class="col-6">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>Auto-layout columns
If you do not want to count units, use plain .col classes. Bootstrap divides the available space evenly among them. Three .col columns automatically become three equal thirds.
Three equal columns with auto-layout
<!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">One</div>
<div class="col">Two</div>
<div class="col">Three</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Adding gutters between columns
The space between columns is called a gutter. Bootstrap adds a default gutter, and you can control it with gutter utilities like g-3 on the row. Higher numbers mean more spacing.
A row with larger gutters
<!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">Card A</div>
<div class="col">Card B</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Exercise: Bootstrap Grid Basics
How many columns does the Bootstrap grid system divide a row into?
