Advertisement
Google Ad Slot: content-top
Bootstrap 5 Containers
In Bootstrap 5, the .container class is used to create a responsive and fixed-width layout that automatically adjusts to different screen sizes. Here’s a breakdown of its features and variations:
- The default
.containerclass creates a responsive, fixed-width container that adapts based on the viewport size. It maintains specific max-widths at different breakpoints (e.g.,sm,md,lg, etc.). - Use
.container-fluidto create a full-width container that spans the entire viewport width, regardless of screen size. This is useful for layouts that require edge-to-edge content.
Container:
The default .container class creates a responsive, fixed-width container that adapts based on the viewport size. It maintains specific max-widths at different breakpoints (e.g., sm, md, lg, etc.).
Fluid Container:
Use .container-fluid to create a full-width container that spans the entire viewport width, regardless of screen size. This is useful for layouts that require edge-to-edge content.
Responsive Containers :
Bootstrap 5 introduced responsive containers that change their max-width based on the screen size breakpoint. You can use .container-{breakpoint} to set a container width that’s fluid until it reaches the specified breakpoint.
|
|
≥540px |
Small ≥720px |
Medium ≥960px |
Large ≥1140px |
Extra Large ≥1320px |
|---|---|---|---|---|---|
|
Class name |
container-sm |
container-md |
container-lg |
container-xl |
container-xxl |
This is a responsive fixed-width container.
This container spans the full width of the viewport.
This container is fluid up until the small (sm) breakpoint.
This container is fluid up until the medium (md) breakpoint.
This container is fluid up until the large (lg) breakpoint.
This container is fluid up until the extra large (xl) breakpoint.
This container is fluid up until the double extra large (xxl) breakpoint.