Table Of Content

Bootstrap Containers Tutorial

View more Tutorials:

1- Bootstrap Container

In  HTML, a  container means an element that can contain other elements, for example  <div>, <span>, .. The  .container class or  .container-fluid class may be used for these elements. OK, now, I will explain you the difference of the two above classes.

Class .container-fluid

The  .container-fluid class will, when applying to an elememt make this element have width of 100%.
container-fluid-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Container Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <h4>.container-fluid Example</h4>
      
      <div class="container-fluid" style="background: #cdd;">
           .container-fluid
      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

Class .container

Based on the screen width size of devices,   Bootstrap divides them into 5 classes:
  1. The devices that have their width of less than 567px  are considered to be Extra Small (very small).
  2. The devices that have their width of greater than or equal to 567px are considered to be Small  or referred to as sm equipment.
  3. The devices that have their width of greater than or equal to  768px are considered to be Medium , or referred to as md equipment.
  4. The devices that have their width of greater than or equal to  992px are considered to be Large , or referred to as lg equipment .
  5. The devices that have their width of greater than or equal to  1200px are considered to be Extra Large , or referred to as xl equipment.
When an element is applied the  .container class, what will take place?
container-example
<h4 style="color:#ff9249">.container Example:</h4>

<div class="container" style="background: #cdd;">
   .container
</div>
Case 1: If the width of equipment is less than  567px, the element will have width of 100%.
Case 2: If the width of equipment is more or equal to   567px and less than  768px then, the element will display in the center and have the width of  567px.
Case 3: If the width of equipment is more or equal to  768px and less than  992px, element will display in the center and have the width of  768px
Case 4: If the width of equipment is more than or equal to  992px and less than  1200px, the element will display in the center and have width of  992px.
Case 5: If the width of equipment is more or equal to  1200px, the element will display in the center and have width of  1200px.

container-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Container Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <h4 style="color:#ff9249">.container Example:</h4>

      <div class="container" style="background: #cdd;">
         .container
      </div>
      
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

View more Tutorials: