BOOTSTRAP 4 CONTAINER

container is the most basic layout in bootstrap. It is used to hold other bootstrap elements and set content margin.

Bootstrap require containing element to wrap the contents of webpage and it provides 2 container classes to choose from : (i) container and (ii) container-fluid

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

The 2 different container in bootstrap are:

1. .container
2. .container-fluid

Below there are two boxes showing 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 size.

1. Bootstrap container class

The .container class in bootstrap provides a responsive container of specific fixed width for a range of device size, means for a range of 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 size.

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

In 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

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

1. Maximum width of .container is fixed for a range of device size but maximum width of .container-fluid is always 100%.
2. When width of the window is resized then .container size changes only at any breakpoint but 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 chage width at every little difference.

Bootstrap container no padding

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

You can remove padding of containers using another bootstrap class .p-0.

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

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.