tutorialstonight logo

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.

Exmple: container class

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.


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.


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.


points to remember 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.
Bootstrap Grid System