Containers

Containers are a fundamental building block that contain, pad, and align your content within a given device or viewport.

There are three different containers:

• .container, which sets a max-width at each responsive breakpoint
• .container-fluid, which is width: 100% at all breakpoints
• .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.

Default Container

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

          
  <div class="container">
    <!-- Content here -->
  </div>
  
          
        

Responsive Containers

Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply max-widths 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.

          
  <div class="container-sm">100% wide until small breakpoint</div>
  <div class="container-md">100% wide until medium breakpoint</div>
  <div class="container-lg">100% wide until large breakpoint</div>
  <div class="container-xl">100% wide until extra large breakpoint</div>
  <div class="container-xxl">100% wide until extra extra large breakpoint</div>
  
          
        

Fluid Containers

Use .container-fluid for a full width container, spanning the entire width of the viewport.

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