Bootstrap Containers
Containers are the most fundamental building block in Bootstrap. Every layout you create should live inside a container, because containers control how content is centered and padded, and how much horizontal space it takes up. In this lesson you will learn the difference between fixed and fluid containers, plus the responsive container variants that change width at specific screen sizes.
Why containers matter
A container wraps your page content and applies consistent horizontal padding (and, for fixed containers, a maximum width). Without a container, content would stretch edge to edge across wide monitors and sit uncomfortably close to the screen edges. Containers also set up the padding that the grid system relies on.
The .container class
The .container class creates a responsive, fixed-width box. It has a set maximum width at each breakpoint and is automatically centered on the page. This is the container you will reach for most often.
A fixed-width, centered container
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>About Us</h2>
<p>This content stays centered with a comfortable maximum width on large screens.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>The .container-fluid class
Use .container-fluid when you want the content to span the full width of the viewport at every screen size. It still applies the standard side padding, but it never caps the width.
A full-width fluid container
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid bg-light">
<h2>Full-Width Hero</h2>
<p>This section always fills 100% of the browser width.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Responsive containers
Bootstrap 5 also offers responsive containers such as .container-sm, .container-md, and .container-lg. These act 100% wide until the named breakpoint is reached, and from that point up they become a fixed-width container.
A container that becomes fixed-width at the md breakpoint
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-md">
<p>Full width on small screens, fixed width from medium (768px) and up.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Exercise: Bootstrap Containers
What does the .container class do?
