Bootstrap Container Class

In this tutorial, you will learn about the bootstrap container class. What they are used for, why you need to use them, and how to use them.

Bootstrap container

The bootstrap container is the most basic layout of bootstrap. To achieve a grid system in bootstrap you need to use the container classes to wrap the row elements.

The container classes are flexbox classes that allow you to create a grid system. It is a wrapper for rows and can also be used to hold, give padding, or center the elements.

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

There are 3 types of containers in bootstrap:

1. The .container class sets max-width at each responsive breakpoints
2. The container-fluid class sets width: 100% at all breakpoints
3. .container-{breakpoint} sets width: 100% until specified width.

The following table show width of different container classes at different breakpoints.

1. Bootstrap container class

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

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 the .container class for different device size are as follows:

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

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

2. Bootstrap container-fluid class

The .container-fluid class in bootstrap creates a responsive container of width 100% width for all device sizes. It is used for the most common cases where you want to have a fluid container.

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

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

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

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.

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

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

3. Bootstrap container-{breakpoint} class

These are responsive container classes that are used to create a responsive container for a specific breakpoint.

It creates a container that is 100 wide until the breakpoint is reached and then the container will be responsive to the screen size.

For example, .container-small is 100% wise until the sm breakpoint is reached and then the container will be responsive to the screen size.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

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.

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

Bootstrap container example

Here are a few examples of bootstrap containers using bootstrap utilities.

<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>

Conclusion

Bootstrap container class provides 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.