Explanation About Bootstrap Container with Examples

The container class is used to set the content’s margin and this class dealing with the responsive behaviors layout of web pages.

Therefore, it contains row elements and the row elements is a container of columns.

so, This system is known as the grid system.

The container class is used to create boxed content.

There are two types of container classes in bootstrap:

1 .container
2 .container-fluid
Lets us see in the details about .container and .container-fluid classes.
.container: The .container used in the bootstrap because it provides a responsive fixed width container.

as a result, see in the below example, the div with class “container” will have a fixed left side and right side margin.

therefore it will not take the complete or full-width of its parent or the viewport.


container class
Explanation: if you see above output result .container class not taken the full-width of its, parents.

the .container class covered width sky-blue area and having the margin in the left-side and right-side which color area is grey as seen image.

so, as a result, the .container class used where you do not need to cover the full-width area.

the heading, paragraph tag will be inside the .container class, which shrink when resizing the viewport

.container-fluid: In Bootstrap the .container-fluid class is used for full-width because it provides a full-width

container which spans the entire width of the viewport.


container-fluid
therefore as a result in the above example, the div with class “container-fluid” will take-up the complete width (full

width) of the viewport and will expand or shrink whenever the viewport is resized.

Explanation: the .container-fluid class take-up complete width of the viewport, as you have seen in the output result

.container-fluid class covered full width, which is colored with sky-blue, the viewport area will expand or shrink whenever the viewport is resized.

the heading, paragraph tag will be inside the .container-fluid class, which shrink when resizing the viewport