Comprendre le système de grille de Bootstrap

La grille est l’une des pièces maitresses de la bibliothèque, elle est incontournable pour réaliser la mise en page de vos sites web. Comprendre son concept et savoir l’utiliser est un grand atout pour structurer impeccablement vos prochaines réalisations.

Le système de la grille est comparable au système de ligne et de cellules d’un tableau du langage HTML sauf que la grille de Bootstrap est beaucoup mieux pensée, elle est fluide, offre d’énorme possibilité, permet de configurer simplement et rapidement une mise en page complexe, elle permet aussi une adaptation automatiquement à tout support.

Sa compréhension et sa mise en pratique ne sont pas compliquées, lisez attentivement et vous comprendrez.

La grille de Bootstrap fonctionne sur un système de 12 colonnes incluses sur une ligne qui peut être seule ou multiple dans un conteneur principal centré automatiquement sur la page. Les colonnes s’agencent parfaitement l’une à la suite de l’autre mais si les 12 colonnes sont dépassés, les autres colonnes passent en dessous.

Ainsi pour réaliser la grille de Bootstrap il faut d’abord définir un conteneur principal des éléments en attribuant la classe du conteneur principal à une balise div, ensuite inclure dans cette div porteur de la classe du conteneur principal une autre div qui aura la classe de la ligne. Maintenant cette dernière div sera le conteneur des balises div qui porteront les classes des colonnes.

Faisons un exemple concret pour traduire en code tout ce charabia mais bien avant découvrez les classes des conteneurs principaux, de la ligne et des colonnes.

Classes des conteneurs principaux :

.container = Classe du conteneur principal d’une grille Bootstrap centré au milieu de la page avec des marges internes et externes.

.container-fluid =  Classe du conteneur principal d’une grille Bootstrap centré au milieu de la page sur toute la largeur de la page avec des marges internes.

Classe de la ligne :

.row = classe de la ligne comportant les 12 colonnes qui doit elle-même être incluse à l’intérieur d’une div portant une classe .container ou .container-fluid.

Classe des colonnes :

.col-x :  classe d’une colonne, conteneur des contenus de la page web, x désigne la largeur a attribué à la colonne, la valeur doit être comprise entre 1 et 12.

Exemple de grille d’une ligne avec 4 colonnes chacune  d’une largeur de 3:

<div class="container">  <!-- Conteneur Principal -->
   <div class="row">  <!-- Ligne -->
      <div class="col-3"> <!--Première colonne -->
           <h2> Contenu1</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim       veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
      </div>
      <div class="col-3"> <!--Deuxième colonne -->
           <h2> Contenu2</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           </p>
      </div>
      <div class="col-3"> <!--Troisième colonne -->
           <h2> Contenu3</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
     </div>
     <div class="col-3"> <!--Quatrième colonne -->
          <h2> Contenu4</h2>
    	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
    </div>
  </div>
</div>

Résultat :

Cours précédent                                                                                    Cours suivant

Voir la table des matières

Télécharger le livre :  Prise en main de Bootstrap 4