Containers are the most basic layout element in Bootstrap 4 and are required when you want to use the default grid system. Bootstrap 4 comes with two types of container classes: fixed and fluid. A web page layout can contain multiple containers that can be nested but it is not always required.

Fixed Container

A fixed container is a responsive, fixed-width container that changes its max-witdh at each breakpoint. The .container class is used to style a responsive, fixed-width container.

<div class="container">
   ...
</div>

Live Example

Fluid Container

A fluid container is a full length container that spans the entire width of the viewpoint (mean it has 100% width all the time). The .container-fluid class provides a full width or fluid container.

<div class="container-fluid">
  ...
</div>

Live Example

Since containers are only required when you want to use Bootstrap 4 grid system (more details in next tutorial), so you can create web pages without any of them.

Responsive breakpoints

To support Bootstrap 4 mobile-first approach, a handful of media queries are used to create responsive breakpoints for the layouts. These breakpoints are based on minimum viewport length and scale up elements as the viewport changes.

Following are the media queries used by Bootstrap 4 for layouts, grid systems and components.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Since the source code of Bootstrap 4 is written in Sass, all the media queries are available via Sass mixins which can be used to customize further.

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Show starting at `min-width: 0`, and then hide at the `sm` breakpoint
.custom-display {
  display: block;
}
@include media-breakpoint-up(sm) {
  .custom-display {
    display: none;
  }
}

Conclusion

That's all for Bootstrap 4 containers and responsive breakpoints. It is very easy to reuse breakpoints Sass mixins while extending the default styles. In next tutorial, we will cover Bootstrap 4 grid system in details.