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:
You can see here the difference between
.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
.container class in bootstrap creates a responsive container of fixed width. The width of
.container box in different kinds od devices are as follows:
|max-width of container||100%
(with 15px padding to left and right)
In the below example wrapper class is
.container, so it will not cover complete viewport.
Exmple: container class
2) .container-fluid Class In Bootstrap
.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.
Exmple: container-fluid class
- Bootstrap requires a containing element that wraps HTML elements inside it to let element use bootstrap's functionality.
- "container" class has fixed width for for different device sizes, yet responsive.
- "container-fluid" is responsive and covers 100% width of device.
- Both "container" and "container-fluid" has 15px padding on left and right side.