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
• The container-fluid class

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.

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:

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

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

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.

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