”;
This chapter will discuss about Bootstrap containers. Containers are used to pad content within them.
Containers are required for default grid system (Grid system uses a series of containers, rows and columns to align content). Containers are used to contain, pad, and center the content within them. Containers can also be nested, though most layouts don”t require a nested container.
There are three different container classes in Bootstrap:
-
.container (sets responsive max-widths).
-
.container-{breakpoint} (width: 100% until specified breakpoint).
-
.container-fluid (width: 100% at all breakpoints).
How the max-width of the container (when compared to original .container and .container-fluid) varies across each breakpoint is shown in the below table:
Examples of the same can be seen in chapter Grid Demo
| Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
X-Large ≥1200px |
XX-Large ≥1400px |
|
|---|---|---|---|---|---|---|
| .container | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
Default Containers
Use .container class which creates a responsive fixed-width container.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Container</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-4">
<div class="bg-light">
<h2 class="text-success text-center">Tutorialspoints</h2>
<h5 class="text-primary text-center">Bootstrap - Container</h5>
<p>Container is used to set the margin of the content. It contains row elements and the row elements are containers of columns. This is known as the grid system.
Container is used to set the margin of the content. It contains row elements and the row elements are containers of columns.</p>
</div>
</div>
</body>
</html>
Responsive Containers
-
Use responsive containers to declare a class that is 100% wide until the specific breakpoint is reached, after that use max-widths for all subsequent breakpoints.
-
Use the .container-sm|md|lg|xl classes to decide whether the container should be responsive or not.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Container</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-sm text-success border mt-2">Tutorialspoints breakpoint-sm</div>
<div class="container-md text-success border mt-2">Tutorialspoints breakpoint-md</div>
<div class="container-lg text-success border mt-2">Tutorialspoints breakpoint-lg</div>
<div class="container-xl text-success border mt-2">Tutorialspoints breakpoint-xl</div>
<div class="container-xxl text-success border mt-2">Tutorialspoints breakpoint-xxl</div>
</body>
</html>
Fluid Containers
Use the .container-fluid class to create a full width container. They span the entire width of the screen.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Container</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2 class="text-success text-center">Tutorialspoints</h2>
<h5 class="text-primary text-center">Bootstrap - Container</h5>
<p>Container is used to set the margin of the content. It contains row elements and the row elements are containers
of columns. This is known as the grid system.
Container is used to set the margin of the content. It contains row elements and the row elements are containers
of columns.</p>
</div>
</body>
</html>
”;