# Bootstrap Containers
1. **Containers**
In Bootstrap 5, containers are fundamental building blocks used to create responsive web layouts. They help to manage the width of the content and align it in a structured manner. There are three types of containers in Bootstrap 5,
i) `.container`
This is a responsive, fixed-width container. It changes its width at different breakpoints based on the viewport size, ensuring optimal spacing and alignment across various devices.
ii) `.container-fluid`
This is a full-width container that spans the entire width of the viewport, regardless of the screen size. It’s useful when you need content to stretch across the full width of the screen.
iii) `.container-{breakpoint}`
This is a responsive container that’s fixed-width until a specific breakpoint is reached. Beyond that breakpoint, it becomes fluid. The breakpoints available are `sm`, `md`, `lg`, `xl`, and `xxl`.
2. **.container**
The `.container` class creates a responsive fixed-width container that adapts to the viewport size. It’s centered horizontally with automatic margins.
```xml
```
3. **.container-fluid**
The `.container-fluid` class creates a full-width container, spanning the entire width of the viewport.
```xml
```
4. **.container-{breakpoint}**
These containers allow you to have a responsive fixed-width container that becomes fluid at a specified break-point.
`.container-sm`: Fixed width until `sm` (small) breakpoint (576px), then full-width.
`.container-md`: Fixed width until `md` (medium) breakpoint (768px), then full-width.
`.container-lg`: Fixed width until `lg` (large) breakpoint (992px), then full-width.
`.container-xl`: Fixed width until `xl` (extra-large) breakpoint (1200px), then full-width.
`.container-xxl`: Fixed width until `xxl` (extra-extra-large) breakpoint (1400px), then full-width.
```xml
```
5. **Example Usage**
Here’s an example to illustrate the difference between these container types,
```xml
Bootstrap Containers Example
.container
.container-fluid
.container-md
```
In this example, you can see how each container behaves differently. The `.container` will have a responsive fixed width, the `.container-fluid` will span the full width of the viewport, and the `.container-md` will have a fixed width until the `md` breakpoint, after which it becomes full-width.