Containers

Containers are the msot basic element of the framework and are used to contain, pad and align the content. While containers can be nested, most layouts do not require a nested container.

The .container-fluid class will spread the entire width of the viewport, disregarding the breakpoints.

The .container class will add a horizontal padding in order to center the content in a fixed width for each breakpoint.

The .container-{breakpoint} class will spread the entire width of the viewport until the specified breakpoint is reached, after which the max-width will be applied for each of the higher breakpoints. For instance, .container-sm is 100% wide until the SM breakpoint is reached, and it will scale up with each additional breakpoint.

• The class .container-sm will be 100% wide until 576px.
• The class .container-md will be 100% wide until 768px.
• The class .container-lg will be 100% wide until 992px.
• The class .container-xl will be 100% wide until 1100px.
• The class .container-xxl will be 100% wide until 1260px.

    <div class="container-sm"></div>
    <div class="container-md"></div>
    <div class="container-lg"></div>
    <div class="container-xl"></div>
    <div class="container-xxl"></div>

The table below ilustrates each containers' widths compared: