BS5 Containers
Bootstrap 5 Containers
As you recall from the last chapter, in order for Bootstrap to surround the contents of a website, it needs a contained element.
Two container classes are provided, and containers are used to pad the material inside them:
- A responsive fixed width container is offered by the .container class.
- full width container that spans the whole width of the viewport is offered by the .container-fluid class.
Fixed Container
To make a fixed-width, responsive container, use the .container class.
Keep in mind that depending on the screen size, its width (max-width) will vary:
| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra Large ≥1200px | XXL ≥1400px | |
|---|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
Resize the browser window when you open the example below to observe how the container width varies at various breakpoints:
Example
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
While the largest breakpoint in Bootstrap 4 is Extra large (≥1200px), the XXL breakpoint (≥1400px) is new in Bootstrap 5.
Fluid Container
To build a full width container that always spans the full width of the screen (width is always 100%), use the .container-fluid class:
Example
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Container Padding
Containers come with left and right padding by default, but no top or bottom padding. Therefore, we often use spacing utilities, such as extra padding and margins to make them look even better. For instance, “add a large top padding” is what .pt-5 signifies:
Example
<div class="container pt-5"></div>
Container Border and Color
Alongside containers, other utilities like borders and colors are also frequently used:
Example
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>
In a later chapter, you will discover much more about colors and border utilities.
Responsive Containers
To create responsive containers, you can also utilize the .container-sm|md|lg|xl classes.
The max-width of the container will vary depending on the viewport and screen size:
| Class | Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | XXL ≥1400px |
|---|---|---|---|---|---|---|
.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 |
Example
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>
