Bootstrap Containers Webtools

Bootstrap Containers

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:

.
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Containers</title> 
</head>
<body>
<div class="container">
<h1> Welcome Coders!</h1>
<p> This a paragraph in <b>.container</b></p>
</div>
<div class="container-fluid">
<h1> Welcome Coders!</h1>
<p> This is a paragraph in <b>.container-fluid</b></p>
</div>
</body> 
</html>

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) { ... }
Back to top