Tutorials Tonight
Follow Us

BOOTSTRAP 4 CONTAINER


In this tutorial, you will learn about containers in bootstrap and how to use them to achieve a grid system.

Bootstrap containers

The bootstrap container is the most basic layout of bootstrap. To achieve a grid system in bootstrap you need to wrap up each row in containers class.

The containers class is a flexbox class that allows you to create a grid system. It is a wrapper for rows.

The container is a necessary element to create a bootstrap grid system, the container contains row and row contain container of columns which form a grid system.

You will learn about grid system in the coming chapters.

There are two types of containers in bootstrap:

The container class is a default container class that is used for the most common cases. It has a fixed width and height.

The container-fluid class is a container class that has a width of 100% and a height of 100%. It is used for the most common cases where you want to have a fluid container.

Below there are two boxes showing the difference between .container and .container-fluid.

.container

.container-fluid

You can see above the difference between .container and .container-fluid classes.

The .container class creates a container with a fixed width for a range of device sizes, while .container-fluid created a container of width 100% for all device sizes.

The .container class is used for the most common cases where you want to have a fixed width container. It is a good choice for the most common cases where you want to have a fixed width container.

The .container-fluid class is used for the most common cases where you want to have a fluid container. It is a good choice for the most common cases where you want to have a fluid container.


1. Bootstrap container class

The .container class in bootstrap provides a responsive container of specific fixed width for a range of device size, which means for a range of the width of device the width of .container is fixed and after the next breakpoint width of .container is different. Example for smaller device (>576px) container width is 540px.

The width of .container box for different device size are as follows:

bootstrap container width

Extra Small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra Large
≥1200px
max-width of container 100%
(with 15px padding to left and right)
540px 720px 960px 1140px

In the example below there is a box with .container class, run the code and adjust output size to see the effect.

Example

<div class="container" style="background-color: silver;">
  <p>TutorialsTonight</p>
  <p>Learning about bootstrap container with tutorialstonight.</p>
</div>
▶ Run the code

2. Bootstrap container-fluid class

The .container-fluid class in bootstrap creates a responsive container of width 100% width for all device sizes.

It creates a 15px padding on both left and right side of the container.

The example below "container-fluid" covers full screen regardless of device size.

Example

<div class="container-fluid" style="background-color: silver;">
  <p>TutorialsTonight</p>
  <p>Learning about bootstrap container with tutorialstonight.</p>
</div>
▶ Run the code

Bootstrap container vs container-fluid

The .container and .container-fluid classes are two different classes that have the same purpose but there are some differences.

Differences between .container and .container-fluid are as follows:

  1. The maximum width of the .container is fixed for a range of device size but the maximum width of the .container-fluid is always 100%.
  2. When the width of the window is resized then .container size changes only at any breakpoint but the width of .container-fluid changes continuously.
  3. Use .container when you want your box to change width only at breakpoints, or use .container-fluid to change the width at every little difference.

Bootstrap remove padding from container

Both .container and .container-fluid has 15px padding to it's left and right.

The padding is added to the left and right sides of the container to make it look like a box.

You can remove padding of .container and .container-fluid by adding .p-0 class to the container.

The class .p-0 add CSS property padding: 0 to the container.

Example

<!-- adding p-0 class for 0 padding -->
<div class="container p-0">
  <p>This container has no padding.</p>
</div>
▶ Run the code

Bootstrap container example

Here are few examples of bootstrap containers using bootstrap utilities.

Example

<div class="container p-4 bg-dark text-white">
  <p class="h1">Bootstrap container example</p>
  <p>This container has 1.5rem padding, white text color and dark background.</p>
</div>
<br>
<div class="container p-3 bg-info text-white">
  <p class="h1">Bootstrap container example</p>
  <p>This container has 1rem padding, white text color and blue background.</p>
</div>
<br>
<div class="container p-3 bg-success text-white text-center">
  <p class="h1">Bootstrap container example</p>
  <p>This container has 1rem padding, white text color, green background and text in center.</p>
</div>
▶ Run the code

Bootstrap container example

This container has 1.5rem padding, white text color and dark background.


Bootstrap container example

This container has 1rem padding, white text color and blue background.


Bootstrap container example

This container has 1rem padding, white text color, green background and text in the center.


Conclusion

Bootstrap containers are a great way to group related elements together in a single unit.

You can use .container and .container-fluid to create a box with a fixed width and a fluid width. You can use .p-0 to remove the padding from the container.

You can use bootstrap utilities to add a border, background color, text color, etc.


Points to remember:

  1. Bootstrap requires a containing element that wraps HTML the elements inside it to let element use bootstrap's functionality.
  2. "container" class has fixed width for different device sizes, yet responsive.
  3. "container-fluid" is responsive and covers 100% width of the device.
  4. Both "container" and "container-fluid" has 15px padding on left and right side.