Bootstrap 5 Container

Bootstrap 5 Container

From the previous chapter, you learned that Bootstrap requires wrapping elements to contain site content.

We fill content in the container and have two container classes available:

  • .container class provides a responsive fixed-width container
  • .container-fluid class provides a full-width container that spans the entire width of the viewport

fixed container

using .container class creates a responsive, fixed-width container.

Please note, its width (max-width）will change on different screen sizes:

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

Please open the following example and adjust the size of the browser window to see how the container width changes at different breakpoints:

Example

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

Try It Yourself

XXL breakpoint (≥1400px) is a new addition in Bootstrap 5, while the largest breakpoint in Bootstrap 4 is Extra large (≥1200px).

fluid container

using .container-fluid class creates a full-width container that always spans the entire screen width (width always 100%）：

Example

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

Try It Yourself

container padding

By default, the container has left and right padding (left and right inner margins), but no top or bottom padding (top and bottom inner margins). Therefore, we often use spacing utilities（utilities），such as additional padding and margins, to make them look better. For example,.pt-5 means "add a largetop padding：

Example

<div class="container pt-5"></div>

Try It Yourself

Container borders and colors

Other tools, such as borders and colors, are often used with containers as well:

Example

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

Try It Yourself

You will learn more about color and border tools in the following chapters.

Responsive Containers

You can also use .container-sm|md|lg|xl class to determine when the container should respond.

container's max-width Will change on different screen sizes/viewport:

Class Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px		 XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

Example

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

Try It Yourself