Bootstrap5 Containers

In the previous chapter, we learned that Bootstrap requires a container element to wrap the content of the website.

We can use the following two container classes:

  • .containerThe class is the default container, providing a fixed-width layout whose width adjusts with different screen sizes.
  • .container-fluidThe class is used for 100% width, occupying the entire viewport (viewport) container. Using this container class will always fill the full screen width, suitable for full-screen layouts.

Fixed-width

.containerThe class is used to create fixed-width responsive pages.

Note:The width (max-width) will scale up or down proportionally according to the screen width.

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

In the following example, we can try adjusting the browser window size to see how the container width changes across different screens:

Bootstrap5 .container example

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

Try it »

Note:Super large screen (≥1400px) is newly added in Bootstrap 5. Bootstrap 4's largest was extra large screen (≥1200px).

100% width

.container-fluidThe class is used to create a full-screen size container. The container always spans the entire screen width (width is always 100%):

Bootstrap5 .container-fluid example

<div class="container-fluid"> <h1>My first Bootstrap page</h1> <p>Using .container-fluid, 100% width, occupies the entire viewport (viewport) container.</p> </div>

Try it »

Container padding

By default, containers have left and right padding, but no top or bottom padding. Bootstrap provides some spacing classes for padding and margins. For example,.pt-5is used to add top padding:

Bootstrap5 example

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

Try it »

Container border and color

Bootstrap also provides some border classes and color classes (bg-dark, bg-primary, etc.) for styling containers:

Bootstrap5 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 »

We will explain these styles in detail in later chapters.

Responsive containers

You can use the class to create responsive containers..container-sm|md|lg|xlThe container's max-width property value will change based on the screen size.

Extra small screen

Class Small screen
<576px 		Medium screen
≥576px 		Large screen
≥768px 		Extra large screen
≥992px 		Super large screen
≥1200px 		Bootstrap5 example
≥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

Bootstrap5 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>

Other extensions
AI thinking...