Grid basics
The grid is built from a container, rows and columns that line up content in rows.
In this page:
Syntax
<div class="container">
<div class="row">
<div class="col">column</div>
<div class="col">column</div>
</div>
</div>Grid basics
Put a .row inside a container and .col elements inside the row. Rows use flexbox and negative margins to offset column gutters, and columns carry the padding. Content should always live inside columns.
Note:
Never put content directly in a row; wrap it in a col.
Example: Grid basics
<!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">
<div class="row">
<div class="col bg-primary-subtle border p-2">One</div>
<div class="col bg-success-subtle border p-2">Two</div>
<div class="col bg-warning-subtle border p-2">Three</div>
</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Placing columns outside a row
- Putting content directly in rows
- Forgetting the container
Chapter Summary
- container > row > col
- Rows are flex containers
- Columns hold content and gutters
- Content goes inside columns
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: