Core Code
Core Code Modern Dev Handbook

Nested Containers

Containers can include rows and columns to structure page sections.

Preview

Code

<!DOCTYPE html>
<html>
<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.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<h2>Nested Layout</h2>

<div class="row">

<div class="col-md-4 bg-light p-3">
Column 1
</div>

<div class="col-md-4 bg-secondary text-white p-3">
Column 2
</div>

<div class="col-md-4 bg-light p-3">
Column 3
</div>

</div>

</div>

</body>
</html>

More BS5 Containers Examples (7)

example Basic Container open example example Container Fluid open example example Responsive Container Breakpoint open example example Container with Grid open example example Container Spacing open example example Centered Content Container open example example Section Layout with Containers open example