Bootstrap 5 Containers

In Bootstrap 5, containers are fundamental building blocks used to structure and layout content. They provide responsive fixed-width or fluid-width containers that help maintain proper alignment and spacing.

Types of Containers in Bootstrap 5

Bootstrap 5 provides three types of containers:

1. Default (Fixed-width) Container

This container is responsive and has a fixed width at each breakpoint.

<div class="container">
  <!-- Your content here -->
</div>

The width of .container changes based on the screen size:
- 576px (sm) → 540px wide
- 768px (md) → 720px wide
- 992px (lg) → 960px wide
- 1200px (xl) → 1140px wide
- 1400px (xxl) → 1320px wide

2. Fluid Container (100% Width)

This container always takes up the full width of the viewport.

<div class="container-fluid">
  <!-- Your content here -->
</div>

It stretches across the entire screen width regardless of the screen size.

3. Responsive Containers (`container-{breakpoint}`)

These containers are fluid up to a specific breakpoint, then become fixed-width.

<div class="container-md">
  <!-- Your content here -->
</div>

Examples of container-{breakpoint} classes:
- container-sm → Full width until 576px, then fixed
- container-md → Full width until 768px, then fixed
- container-lg → Full width until 992px, then fixed
- container-xl → Full width until 1200px, then fixed
- container-xxl → Full width until 1400px, then fixed

Choosing the Right Container

Use .container when you want a responsive fixed-width layout.
Use .container-fluid when you need a full-width layout.
Use .container-{breakpoint} when you want a fluid layout that becomes fixed at a certain screen size.

Would you like an example using Bootstrap grid within a container?

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.