12-column grid
Each row is divided into twelve equal parts, and columns claim some of those parts.
In this page:
Syntax
<div class="row">
<div class="col-4">one third</div>
<div class="col-8">two thirds</div>
</div>12-column grid
A class like col-4 takes four of twelve columns (one third). Columns in a row that add up to more than twelve wrap onto a new line. Combining widths such as 8 and 4, or 3 three times and 3 again, lets you build any layout.
Note:
12 divides evenly by 2, 3, 4 and 6, which is why it is used.
Example: 12-column grid
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container text-center">
<div class="row mb-2"><div class="col-8 bg-primary text-white">col-8</div><div class="col-4 bg-secondary text-white">col-4</div></div>
<div class="row mb-2"><div class="col-3 bg-info">3</div><div class="col-3 bg-info">3</div><div class="col-3 bg-info">3</div><div class="col-3 bg-info">3</div></div>
<div class="row"><div class="col-6 bg-success text-white">6</div><div class="col-6 bg-success text-white">6</div><div class="col-6 bg-danger text-white">wraps (6+6+6 > 12)</div></div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Making widths add up to more than 12 by accident
- Expecting unequal widths without classes
- Forgetting columns wrap
Chapter Summary
- Twelve columns per row
- col-N takes N of 12
- Extra columns wrap
- 12 splits into halves, thirds, quarters
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: