Nesting
You can place a new row of columns inside a column to build more complex layouts.
In this page:
Syntax
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6">nested</div>
<div class="col-6">nested</div>
</div>
</div>
</div>Nesting
Inside a column, add a new .row with its own columns. The nested row again divides its parent column into twelve parts, so widths are relative to the parent. Nesting is handy for sub-layouts such as cards in a sidebar.
Note:
Nested rows do not need a container.
Example: Nesting
<!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-sm-8 bg-light border p-2">
Level 1: col-sm-8
<div class="row mt-2">
<div class="col-6 bg-primary text-white p-2">Level 2: col-6</div>
<div class="col-6 bg-secondary text-white p-2">Level 2: col-6</div>
</div>
</div>
<div class="col-sm-4 bg-light border p-2">Level 1: col-sm-4</div>
</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Adding a container inside a column
- Expecting nested widths to relate to the page
- Nesting too deeply
Chapter Summary
- Put a row inside a col
- The nested grid has its own 12 columns
- No container needed
- Widths are relative to the parent column
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: