tutorialstonight logo
A Platform To Learn To Code

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

.container
.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:

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 below example wrapper class is .container, so it will not cover complete viewport.

Exmple: container class

Run the code

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.

Exmple: container-fluid class

Run the code

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