BOOTSTRAP 4 CONTAINERS

The most basic layout of Bootstrap are containers. Containers are necessary to use bootstrap's grid system.

Containers are used to hold rows and rows holds column, combining all three created grid system.

There are 2 types of containers in bootstrap:

1. .container
2. .container-fluid

You can see here the difference between .container and .container-fluid. The .container class creates a flexible container with fixed width to different kinds of devices, while .container-fluid created a contaner of width 100% to all kinds of devices.

1) .container Class In Bootstrap

The .container class in bootstrap creates a responsive container of fixed width. The width of .container box in different kinds od devices are as follows:

In the below example wrapper class is .container, so it will not cover complete viewport.

2) .container-fluid Class In Bootstrap

The .container-fluid class in bootstrap creates a responsive container of width 100%, width padding-left and padding-right equals to 15px.

The container-fluid covers entire viewport of device. In the example below "container-fluid" covers full screen.

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.