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.

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.

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.