Bootstrap5 Containers

In the previous section, we learned that Bootstrap requires a container element to wrap the content of the website.

We can use the following two container classes:

• .container class for a fixed-width container that supports responsive layouts.
• .container-fluid class for a 100% width container that spans the entire viewport.

Fixed Width

The .container class is used to create a fixed-width responsive page.

Note: The width (max-width) scales proportionally with the screen width.

In the following example, you can try resizing the browser window to see how the container width changes on different screens:

Bootstrap5 .container Example

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

Note: Extra Extra Large Screen (≥1400px) is new in Bootstrap 5. Bootstrap 4's largest was Extra Large Screen (≥1200px).

100% Width

The .container-fluid class is used to create a full-screen size container that always spans the entire screen width (width is always 100%):

Bootstrap5 .container-fluid Example

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>Using .container-fluid, 100% width, spans the entire viewport.</p> 
</div>

Container Padding

By default, containers have padding on the left and right, but not on the top and bottom. Bootstrap provides some spacing classes for padding margins. For example, .pt-5 is used for padding the top:

Bootstrap5 Example

<div class="container pt-5"></div>

Container Borders and Colors

Bootstrap also provides some border and color classes (like border, bg-dark, bg-primary, etc.) for styling containers:

Bootstrap5 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>

We will explain these styles in detail in the following sections.

Responsive Containers

You can use the .container-sm|md|lg|xl classes to create responsive containers.

The max-width property of the container changes based on the screen size.

Bootstrap5 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> ```