Les options et les possibilités offertes par la grille de Bootstrap4

Les options de la grille de Bootstrap4

Dans la leçon précédente, pour bien comprendre le système de grille de Bootstrap4, nous avons réalisé une grille d’une ligne affichant 4 colonnes sur tous les supports, il est possible de faire mieux. En effet Bootstrap4 nous permet de créer une grille et de différencier le nombre des colonnes et la taille des colonnes de la  grille en fonction du support d’affichage.

Tout d’abord quels sont les options qu’offrent Bootstrap4 pour les divers types d’écrans ?

  • Les écrans de très petite taille ( largeur d’écran est inférieure à 576px)

La classe bootstrap4 pour définir une colonne  pour ces types d’écran est : .col-

La dimension maximale du conteneur principal de ces types d’écran n’est pas définie, elle est automatique.

  • Les écrans de petite taille (largeur d’écran supérieure ou égale 576px)

La classe bootstrap4 pour définir une colonne  pour ces types d’écran est : .col-sm-

La dimension maximale du conteneur principal de ces types d’écran est : 540px

  • Les écrans de taille moyenne (largeur d’écran supérieure ou égale 768px)

La classe bootstrap4 pour définir une colonne  pour ces types d’écran est : .col-md-

La dimension maximale du conteneur principal de ces types d’écran est : 720px

  • Les écrans de taille large (largeur d’écran supérieure ou égale 992px)

La classe bootstrap4 pour définir une colonne  pour ces types d’écran est : .col-lg-

La dimension maximale du conteneur principal de ces types d’écran est : 960px

  • Les écrans de taille extra large (largeur d’écran supérieure ou égale 1200px)

La classe bootstrap4 pour définir une colonne  pour ces types d’écran est : .col-xl-

La dimension maximale du conteneur principal de ces types d’écran est : 1140px.

Quel qu’en soit le type d’écran chaque colonne a une marge interne de 15px à gauche et à droite.

Les possibilités offertes par la grille de Bootstrap4

Ils sont illimités les possibilités qu’offre la grille, avec les options de la grille vous décidez de comment afficher les contenus sur les différents terminaux. Vous choisissez aussi le contenu qui aura plus de priorité par rapport à un autre en fonction du support d’accès des contenus.

Réalisons un exemple pour bien illustrer ces propos et vous donnez un aperçu du pouvoir que vous offre la grille de Bootstrap4.

Exemple : Nous allons créer une grille automatique qui sur un écran large affiche une ligne de 4 colonnes de même dimension, sur l’écran d’une tablette 2 lignes dont la première ligne contiendra une seule colonne occupant toute la largeur, la deuxième contiendra 3 colonnes de même largeur et sur les écrans de taille petite, 2 lignes et sur chaque ligne 2 colonnes de même largeur.

<div class="container">  < !-- Conteneur Principal -->
    	<div class="row"> < !-- Ligne -->
    		<div class="col-6 col-sm-12 col-lg-3"> < !--Première colonne -->
    			<h2>Contenu 1</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-6 col-sm-4 col-lg-3">< !--Deuxième colonne -->
    			<h2>Contenu 2</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-6 col-sm-4 col-lg-3">< !--Troisième colonne -->
    			<h2>Contenu 3</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-6 col-sm-4 col-lg-3">< !--Quatrième colonne -->
    			<h2>Contenu 4</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>

Petite explication avant l’affichage des rendus sur les différents types d’écran :

Vous remarquerez que la classe de la première colonne contient les valeurs suivantes :  col-6 col-sm-12 col-lg-3 et les classes des trois autres colonnes contiennent les valeurs suivantes : col-6 col-sm-4 col-lg-3, voici les explications :

 .col-6 : pour signifier que la colonne occupe la moitié de la ligne sur les écrans de très petite taille

 .col-sm-4 : pour signifier que la colonne occupe le tiers de la ligne sur les écrans de taille petite et moyenne ( les tablettes)

 .col-sm-12 : pour signifier que la colonne occupe toute la ligne sur les écrans de taille petite et moyenne

 .col-lg-3 : pour signifier que la colonne occupe le quart la ligne sur les écrans larges.

Rendu sur un écran large

Comprendre le système de grille de Bootstrap

Rendu sur une tablette

système de grille de Bootstrap

Rendu un écran de petite taille

système de grille

Cours précédent                                                                                        Cours suivant

Voir la table des matières

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.