Container in Bootstrap

The container in Bootstrap is used to set the padding around the content as well left and right margin to the content. Although, it is also used to align the content horizontally center on the page in the case of fixed width container.
There are three types of Bootstrap container classes:

Container(.container) - Having Fixed Width At Each Breakpoints
Fluid Container(.container-fluid) - Having 100% Width At All Breakpoints
Responsive Container(.container-breakpoint) - Having 100% width till the specified breakpoint & then fixed width for higher breakpoints

The given below table displays each container's max-width with respect to the .container and .container-fluid width across each breakpoint.

Classes Bootstrap Grid System	X-Small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

Bootstrap Container

In Bootstrap .container class provides responsive fixed width container means it's width will be changed according to viewport width of the device. It is clear that it can not take full available width of the viewport. Although, it has by default left and right margin.

Why We Use .container Class ?
Since it is a container for a row means it contains one or more than one row inside the container. While, a row is a container for columns.

Example

Container (Fixed Width)

Fixed Container (max-width)

In the given below table, each container's max-width is described with respect to each breakpoint.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px	XX-Large ≥1400px
.container	100%	540px	720px	960px	1140px	1320px

General Syntax

      <div class="container"></div>

Source Code

          <div class="container bg-danger">
     <p class="text-center text-white p-4"> Container - Fixed Width At The All Breakpoint</p>
</div>

Source Code:Output

Container - Fixed Width At The All Breakpoint

In the above example, the div having class .container takes fixed width and having fixed left and right margin to the both side of the container.

Bootstrap Fluid Container

The .container-fluid class provides a full width container that covers complete available viewport width of the device. It can also a container for a row that is a container for Bootstrap columns. The Bootstrap fluid container will also takes complete width whenever the viewport is resized.

Example

Fluid Container(100% Width)

Fluid Container Width

In the given below table,it is clear that fluid containers always takes 100% width of the screen at each breakpoints.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px	XX-Large ≥1400px
.container-fluid	100%	100%	100%	100%	100%	100%

General Syntax

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

Source Code

          <div class="container-fluid bg-dark">
     <p class="text-center text-white">Fluid Container - Takes 100% Width At All Breakpoints</p>
</div>

Source Code:Output

Fluid Container - Takes 100% Width At All Breakpoints

In the above example the div having class .container-fluid will take whole available width of the viewport and its width will be changed whenever the the viewport is resized.

Responsive Container

Bootstrap responsive containers have 100% width till the specified breakpoint and then max-width for higher breakpoints.

For example, the .container-sm class takes 100% width to start until the sm breakpoint is reached. Then, it scales up with md, lg, xl, and xxl.

Bootstrap Responsive Container Classes:

container-sm: It specifies 100% width till the sm breakpoint i.e. 540px and above 540px, it will contain fixed max-width.
container-md: It specifies 100% width till the md breakpoint i.e. 720px and above 720px, it will contain fixed max-width.
container-lg: It specifies 100% width till the lg breakpoint i.e. 960px and above 960px, it will contain fixed max-width.
container-xl: It specifies 100% width till the xl breakpoint i.e. 1140px and above 1140px, it will contain fixed max-width.
container-xxl: It specifies 100% width till the xxl breakpoint i.e. 1320px and above 1320px, it will contain fixed max-width.

Example

100% wide until small breakpoint

100% wide until medium breakpoint

100% wide until large breakpoint

100% wide until extra-large breakpoint

100% wide until extra extra-large breakpoint

Responsive Container Width

In the given below table, every responsive container's width is described for the specific breakpoins.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px	XX-Large ≥1400px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px

General Syntax

      <div class="container-{breakpoint}">
    ...
</div>

Source Code

          <div class="container-sm bg-light">
    <p class="text-center text-dark">100% wide until small breakpoint</p>
  </div>
  <div class="container-md bg-dark">
    <p class="text-center text-white">100% wide until medium breakpoint</p>
  </div>
  <div class="container-lg bg-light">
   <p class="text-center text-dark"> 100% wide until large breakpoint</p>
  </div>
  <div class="container-xl bg-dark ">
   <p class="text-center text-white"> 100% wide until extra large breakpoint</p>
  </div>
  <div class="container-xxl bg-light">
   <p class="text-center text-white"> 100% wide until extra extra large breakpoint</p>
  </div>

Source Code:Output

100% wide until small breakpoint

100% wide until medium breakpoint

100% wide until large breakpoint

100% wide until extra large breakpoint

100% wide until extra extra large breakpoint

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4