o7planning

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:

Maybe you are interested

These are online courses outside the o7planning website that we introduced, which may include free or discounted courses.