Containers are a basic Bootstrap component that contain, pad, and align your content into a specific device or viewport.

How they Containers function Works

Containers are the most fundamental layout element in Bootstrap, and they're essential if you want to use our default grid system. Containers are used to hold, pad, and (sometimes) centre the content they contain. Although containers can be nested, nested containers are not required in most layouts.

Bootstrap comes with 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.

• .container has one fixed width for each screen size in bootstrap (xs,sm,md,lg);
• .container-fluid expands to fill the available width.

Depending on the width of the viewport that the webpage is being viewed on, the container class gives its div a specific fixed width.

Your .container-fluid element, on the other hand, will constantly resize as you make even the smallest changes to your browser width.

Default container

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

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.

Example:

Fluid containers

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