Bootstrap Containers

Bootstrap Containers

Table of content

Containers

Bootstrap requires a containing element to wrap site contents. In this chapter we will learn about these containing elements.

Containers are used to provide padding to the content inside them. Bootstrap has two types of container defined by two classes. These are:

  1. The .container class provides a responsive fixed width container.
  2. The .container-fluid class provides a responsive 100% width container, spanning the entire width of the viewport.
  3. The .container-{breakpoint} class provides a responsive 100% width container, spanning the entire width of the viewport until the specified breakpoint.

Here is an example:

For better understanding, check below table.

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%

Media Queries for above containers

Media queries are used create a responsive layout of HTML document.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

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

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

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

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
You may also like
More Tutorials Free Web Tools Free Blogger Themes

Comments