Bootstrap Container Class

In this tutorial, you will learn and understand the Bootstrap container class with the help of multiple examples.

Bootstrap container

The Bootstrap container is an essential layout element in the Bootstrap grid system. Since it is a wrapper for rows, and rows is a wrapper for columns; hence, it is widely used in the grid system of Bootstrap.

It is primarily used to create a fixed-width responsive container that holds the web content, centers the content, and generates left and right margins up to 15 pixels.

There are 3 types of container classes in Bootstrap. These are:

• The .container class is responsible for setting the maximum width of the container at each breakpoint or screen size, like small (sm), medium (md), large (lg), extra large (xl), and extra, extra large (xxL).?
• The .container-fluid class sets 100% width at all breakpoints.
• The responsive container (. container-{breakpoint}) sets 100% width until the specified breakpoint and then takes the fixed max-width to the higher breakpoints.

Bootstrap container class

The .container class creates a default bootstrap container with a fixed width across all the specified breakpoints. It is a responsive container, and its width changes at each breakpoint. It takes 100% width in an extra-small device, but it takes 540px on a small screen, 576px on a medium screen, 768px on a large screen, and so on.

Let us see the width of the .container class across each of the breakpoint.

General Syntax

<div class="container">Bootstrap Container</div>        

Source Code

<div class="container bg-danger text-center mt-5">
  <p class="text-white">
       Bootstrap Container: Having Fixed At All Breakpoints
  </p>
</div>        

Bootstrap .container-fluid class

Bootstrap container-fluid class creates a full-width responsive container for all screen sizes, like small, medium, large, extra large, and extra large. When the width of the window is resized, the fluid container width changes continuously.

General Syntax

<div class="container-fluid">container fluid</div>        

Source Code

<div class="container-fluid bg-danger text-center">
  <p class="text-white">
  	The container fluid takes up 100% of the available width of the screen.
  </p>
</div>        

Bootstrap container-{breakpoint} class

It creates a responsive container of 100% width until the specified breakpoint and after that it takes max-width (fixed width) for higher breakpoints.

For example, the .container-small takes 100% width until the sm breakpoint is reached, and then the container takes fixed width for md, lg, xl, and xxl breakpoints, but still the container is responsive for the rest of the breakpoints.

General Syntax

<div class="container-{sm|md|lg|xl|xxl}">Responsive Container</div>        

Conclusion

The Bootstrap container class constructs a Bootstrap grid system with the help of rows and columns. It is a wrapper for holding the related web content, centers the content horizontally sometime, and generates left and right margins up to 15px. You can a create fixed-width container, fluid-width container, and responsive container using the .container,.container-fluid, and .container-{sm|md|lg|xl|xxl} classes, respectively.