Bootstrap 5 Containers


Creating Containers with Bootstrap5

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, align the content within them. They are also used to align the content horizontally center on the page in case of fixed width layout.

Bootstrap comes with two different container classes:

  • .container, which sets a max-width at each responsive breakpoint
  • .container-fluid, which is width: 100% at all breakpoints

The table below illustrates how each container’s max-width compares to the original .container and .container-fluid across each breakpoint.

Classes

Bootstrap Grid System

 X-Small <576px Small ≥576px Medium ≥768px Large ≥992px X-Large ≥1200px XX-Large ≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.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
.container-fluid 100% 100% 100% 100% 100% 100%

Fixed Container

Use the .container class to create a responsive, fixed-width container max-width changes at each breakpoint.

Example 
<div class="container">
  <!-- Content here -->
</div>
Try it Yourself

Output:

Container Fluid

Use the .container-fluid class to create a full width container. The width of the fluid container will always be 100% irrespective of the devices or screen sizes.

Example 
<div class="container-fluid">
  <!-- Content here -->
</div>
Try it Yourself

Output: