devstory

Le Tutoriel de Bootstrap Container

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

1- Bootstrap Container

En HTML, un container est un élément qui peut contenir d'autres éléments, par exemple <div>, <span>, .. La classe .container ou la classe .container-fluid peuvent utiliser ces éléments. OK maintenant je vais vous expliquer la différence entre ces deux classes au-dessous.
.container-fluid
L'application de la classe .container-fluid à un élément fait que la largeur de cet élément ait 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
Basé sur la taille de largeur de l'écran des appareils, Bootstrap les classifie en 5 classes :
  1. Les appreils dont la largeur est inférieure à 567px sont considérés comme étant Extra Small (très petits).
  2. Les appareils dont la largeur est supérieure ou égale à 567px sont considérés comme Small (petits) ou appelés équipements sm.
  3. Les appareils dont la largeur est supérieure ou égale à 768px sont considérés comme Medium (Moyen) ou appelés équipements sd.
  4. Les appareils dont la largeur est supérieure ou égale à 992px considérés comme Large (Grand) ou appelés équipements lg.
  5. Les appareils dont la largeur est supérieure ou égale à  1200px considérés comme Extra Large (Très grand), ou appelés équipements xl.
Lorsqu'un élément est apliqué à la classe .container qu'est-ce qu'il se produit ?
container-example

<h4 style="color:#ff9249">.container Example:</h4>

<div class="container" style="background: #cdd;">
   .container
</div>
Situation 1: Si la largeur de l'équipement est inférieur à 567px, la largeur de l'élément sera à 100%.
Situation 2: Si la largeur de l'équipement est supérieure ou égale à 567px et inférieure à 768px l'élément affichera au centre (center) et sa largeur est à 567px.
Situation 3: Si la largeur de l'équipement est supérieure ou égale à 768px et inférieure à 992px, l'élément affichera au centre (center) et sa largeur est à 768px
Situation 4: Si la largeur de l'équipement est supérieur ou égale à 992px et inférieure à 1200px, l'élément affichera au centre (center) et la largeur de cet élément est 992px.
Situation 5 : Si la largeur de l'équipement est supérieur ou égale à 1200px, l'élément affichera au centre (center) et la largeur de cet élément est 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>
Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.