Chapter-2: Containers in Bootstrap

Containers are the fundamental layout element within Bootstrap. They are the proverbial box that your website content lives within. It provide a base padding and margin that prevents your text and images from hugging the side of your browser or the edges of your page. They also help make your layout flexible to all screens.

Below are the three types you asked for…

1. .Container (the “Fixed-Width” Box)

This is the most popular one. It builds a flexible and responsive fixed width box which adjusts its width relative to the screen width (breakpoints).

How it works: It remains centered and maintains “white space” (gutters) around the sides of the page on larger screens.

Ideal for: Standard websites such as blogs and news sites where you‘d like to maintain a simple, symmetrical aesthetic.

2. .container-fluid (The “Full-Width” Box)

This container is much more simple: it is always 100% wide whatever the screen size.

How it is achieved: It extends to the edges of the browser window (with a tiny bit of padding on the sides).

Suitable for: Dashboards, map-based applications or anything where you want to use every bit of the screen.

3. container-{breakpoint} (The ” Hybrid”)

This is a “fluid-until-fixed” container. It flows at 100% width until the container reaches a certain screen size then behaves as a “normal” fixed width container.

Example:.container-md:
On Small screens (phones): it is fluid width (i.e. 100%)

On Medium/large screens (tablets/laptops): It becomes fixed width.

Best for: when you want full-width on mobile, yet centered desktop content.

Comparison Table

Class	Extra Small (<576px)	Medium (≥768px)	Extra Large (≥1200px)
`.container`	100%	720px	1140px
`.container-fluid`	100%	100%	100%
`.container-md`	100%	720px	1140px

Code Example of containers:

Copy this into your HTML to see the difference in action:
HTML

<div class="container" style="background: lightblue;">
  I am a standard container.
</div>

<div class="container-fluid" style="background: lightgreen;">
  I am always full-width.
</div>

<div class="container-lg" style="background: lightcoral;">
  I am fluid until the 'Large' breakpoint!
</div>

The gravity difference resulting from the different value of the square modulus of n is balanced by (p2¼). The last introduced the period (p) in the expression of the armorial matter. By doing these substitution one obtains: with the forms of the words and.

Quick Tip: Don‘t ever nest a container inside another container. Mixing padding and other styling makes a huge mess! Usually one container per section or one container for the entire page is plenty.

Advanced Tip: Responsive Gutters

There are gutters (padding around, between and within columns).

Containers come with default horizontal padding. If you notice your content is sitting right on the edge of the screen and it looks “shabby,” then you‘ve most likely removed the container accidentally or used a row without a container wrapper.

Rule of Thumb: > Container -> Row -> Column You should never skip a step in this hierarchy otherwise your alignment will be no longer perfect.