Bootstrap comes with three different containers:

• , which sets a max-width at each responsive breakpoint
• .container-{breakpoint}, which is width: 100% until the specified breakpoint

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

Our default .container class is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.

Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply s for each of the higher breakpoints. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will scale up with md, lg, xl, and xxl.

As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in _variables.scss) that powers them:

In addition to customizing the Sass, you can also create your own containers with our Sass mixin.