mydomain
No ADS
No ADS

Bootstrap Containers Tutorial with Examples

  1. Bootstrap Container

1. Bootstrap Container

No ADS
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.
.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>
.container
Based on the screen width size of devices, Bootstrap divides them into 5 classes:
  • The devices that have their width of less than 567px are considered to be Extra Small (very small).
  • The devices that have their width of greater than or equal to 567px are considered to be Small or referred to as sm equipment.
  • The devices that have their width of greater than or equal to 768px are considered to be Medium , or referred to as md equipment.
  • The devices that have their width of greater than or equal to 992px are considered to be Large , or referred to as lg equipment.
  • 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>
No ADS

Bootstrap Tutorials

Show More
No ADS