Core Code
Core Code Modern Dev Handbook

Responsive Container Breakpoint

Use responsive containers like container-md to control layout width at breakpoints.

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-md bg-secondary text-white py-5">
<h2>Container MD</h2>
<p>This container becomes full width until the md breakpoint.</p>
</div>

</body>
</html>

More BS5 Containers Examples (7)

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