Advertisement

Google Ad Slot: content-top

Bootstrap 5 Containers

~1 min read · Bootstrap
On this page

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 .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.).
  • 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.
.container
.container-fluid

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.).

Example

My First Bootstrap Page

The default .container class creates a responsive.

Try it yourself

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.

Example

My First Bootstrap Page

The default .container class creates a responsive.

Try it yourself

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

Example

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.

Try it yourself