Tutorials Tonight's Logo
Follow Us

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.

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

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.

<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 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>
▶ Run the code

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>
▶ Run the code

Bootstrap container example

Here are few example of bootstrap containers using bootstrap utilities.

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

<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

Points to remember:

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

More Learning

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

Bootstrap Grid System

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.