Bootstrap Containers

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

images/coding/coding08.webp

Containers are the most basic layout element in Bootstrap and are required when using default grid system. Containers are used to contain, pad, and sometimes center the content within them.

Types of Containers

Bootstrap comes with three different containers:

  1. container, which sets a max-width at each responsive breakpoint
  2. container-fluid, which is width: 100% at all breakpoints
  3. container-{breakpoint}, which is width: 100% until the specified breakpoint

Default Container

The default container .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 to specify a class that is 100% wide until the specified breakpoint is reached. For example, .container-md is 100% wide to start until the md breakpoint is reached, where it will scale up with lg, xl, and xxl.

Fluid Containers

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

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