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.

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.

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

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.