Container types
Containers are the boxes that centre your content and control how wide it can get.
In this page:
Syntax
<div class="container">...</div>
<div class="container-fluid">...</div>
<div class="container-md">...</div>Container types
.container is a fixed-width box that changes at each breakpoint, .container-fluid spans the full width, and .container-md (or sm, lg, xl, xxl) is fluid until that breakpoint. Containers also add horizontal padding, and grids must live inside one.
Note:
Use container-fluid for full-width layouts and container for centred content.
Example: Container types
<!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 bg-primary-subtle border p-2 mb-3">.container (fixed widths)</div>
<div class="container-fluid bg-success-subtle border p-2 mb-3">.container-fluid (always full width)</div>
<div class="container-md bg-warning-subtle border p-2">.container-md (fluid below 768px)</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Nesting containers inside each other
- Putting a row outside any container
- Expecting container-fluid to be centred
Chapter Summary
- .container has fixed widths per breakpoint
- .container-fluid is always 100%
- .container-{breakpoint} is fluid until that size
- Rows go inside containers
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: