Containers

Containers are the essential elements of the bootstrap layout. It is required when we are using a bootstrap grid system. Containers can also be nested, but most layouts do not need nested containers.

Bootstrap has two classes of containers

  • .container
  • .container-fluid

.container class – This class is used to create a responsive and fixed-width container. There is a fixed margin in the left and right of this class, and it does not completely cover its parent, screen, or Viewport.

Bootstrap 4 Layout

Example

Output

Bootstrap 4 Layout

.container-fluid class – Container-fluid class covers the full width of the screen.

Bootstrap 4 Layout

Example

Output

Bootstrap 4 Layout

Responsive Containers

The responsive containers automatically adjust themselves (in terms of height and width) according to their parent element.  The max-width of the container varies at different scream size.

  Extra small <576px Small >=576px Medium >=768px Large >=992px Extra-large >=1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

Pin It on Pinterest

Share This