Bootstrap Container: Guide to Bootstrap's Container Classes and Usage

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

<h1>My First Bootstrap Page</h1>

<p>The default .container class creates a responsive.</p>

</div>

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

<h1>My First Bootstrap Page</h1>

<p>The default .container class creates a responsive.</p>

</div>

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

<p>This is a responsive fixed-width container.</p>

</div>

<p>This container spans the full width of the viewport.</p>

</div>

<p>This container is fluid up until the small (sm) breakpoint.</p>

</div>

<p>This container is fluid up until the medium (md) breakpoint.</p>

</div>

<p>This container is fluid up until the large (lg) breakpoint.</p>

</div>

<p>This container is fluid up until the extra large (xl) breakpoint.</p>

</div>

<p>This container is fluid up until the double extra large (xxl) breakpoint.</p>

</div>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.