3 Etapes Simples pour Maitriser une fois pour de bon l’Utilisation du Système de Grille Bootstrap

Avez-vous envie de connaître le système de grille Bootstrap et savoir à quoi il sert ? Vous voulez maîtriser parfaitement son utilisation ?

Si vous avez répondu oui à l’une de ces deux questions, alors cet article est pour vous. Car une fois que vous aurez terminé la lecture de ce tutoriel, vous connaîtrez parfaitement la grille de Bootstrap, à quoi elle sert et le plus important vous passerez maître dans l’utilisation de la grille de Bootstrap.

Qu’est-ce que le système de grille Bootstrap ?

LA SUITE APRÈS CETTE PUBLICITÉ

La sortie du système de grille de Bootstrap fut une révolution dans l’écosystème du développement web.

Les développeurs de Bootstrap l’ont sortie à une époque où les appareils de petite taille prenaient de l’ampleur et commençaient à être utilisés majoritairement pour l’accès à internet.

Quel est le lien entre ce système de grille et les appareils de petite taille ?

Vu que pour accéder à internet les utilisateurs commençaient par avoir une préférence pour ces appareils mobiles, il fallait un outil capable d’adapter les pages web à ces derniers.

C’est ainsi que Bootstrap fut le premier à proposer comme solution le système de grille dans sa troisième version sortie le 19 août 2013.

La grille est un système qui permet d’organiser les éléments sur une page web de telle façon que ces éléments s’adaptent automatiquement à tout type d’écran : ces pages web s’appellent des pages responsives.

Maintenant, vous allez découvrir en trois étapes comment réaliser une grille Bootstrap.

PS : Dans la suite, je vous donne à chaque fois un exemple illustratif à chaque section pour votre bonne compréhension. Et  pour que les comportements définis dans les codes sources puissent être bien remarqués, je leur ai appliqués une bordure et une marge interne.

Première Étape : Définissez le point de départ de votre grille Bootstrap 

Pour réaliser la grille de Bootstrap il faut au préalable définir un conteneur dans lequel les éléments seront imbriqués. Bootstrap met à votre disposition deux classes pour définir un conteneur : la classe .container et la classe .container-fluid.

La différence entre ces deux classes est que la classe .container-fluid occupe toute la largeur de la page alors que la classe .container est centrée au milieu de la page.

Exemple 1 :

<div class="container">
	<p>Je suis le conteneur centré au milieu de la page, celui qui est <b>conçu à l'aide la classe .container</b></p>
</div>
<div class="container-fluid">
	<p>Je suis le conteneur qui occupe toute la largeur de la page, celui qui est <b>conçu à l'aide la classe .container-fluid</b></p>
</div>

Maintenant, que vous savez définir le conteneur d’une grille, il est temps que vous sachiez comment imbriquer les éléments pour qu’ils s’adaptent automatiquement à tous les supports.

Deuxième étape : Intégrez le système de colonnes de Bootstrap dans le conteneur

Après avoir définit le point de départ, il faut maintenant spécifier à la grille la manière dont les éléments doivent être agencés.

Retenez ceci pour la suite : le système de grille de Bootstrap est composé de 12 colonnes.

Il vous faut maintenant créer une ligne à l’intérieur du conteneur, ensuite à l’intérieur de cette ligne, créer les différentes colonnes, ce sont ces dernières qui vont réceptionner les éléments à mettre en page.

Si vous n’avez pas compris !

Ne vous inquiétez pas, vous allez bientôt tout comprendre à l’aide d’un exemple simple et concis.

Mais il faut avant cet exemple que je vous apprenne les classes de Bootstrap permettant de définir une ligne et une colonne.

• La classe permettant de créer une ligne est la classe .row.
• Et la classe permettant de créer une colonne est la classe .col

Les deux s’utilisent au sein d’une balise div.

Comme je vous le signifiais dans un précédent paragraphe, la grille est composée de 12 colonnes. Du coup quand vous créez une colonne, il faut lui définir une taille comprise entre 1 et 12.

Place à la pratique

Exemple 2 : Notre Première grille :

<div class="container">
	<div class="row">
		<div class="col-12">
			Voici la première grille de ce tutoriel
		</div>
	</div>
</div>

Nous venons de concevoir une grille d’une ligne et d’une colonne, nous pouvons faire mieux que ça, mais avant voici une petite explication.

Quel que soit le nombre des colonnes définies au sein d’une ligne, il faut que la somme de leur taille fasse 12.

Au cas où la somme des tailles des colonnes dépasse 12, la dernière colonne passe automatiquement en dessous des autres colonnes.

Un autre exemple : Nous allons réaliser une grille avec les instructions suivantes

• Une ligne comportant trois colonnes
• La taille de la première colonne sera 2
• La taille de la seconde sera 6
• Et la taille de la dernière sera 4.

Exemple 3:

<div class="container">
	<div class="row">
		<div class="col-2">
			Première Colonne
		</div>
		<div class="col-6">
			Seconde Colonne
		</div>
		<div class="col-4">
			Troisième Colonne
		</div>
	</div>
</div>

Maintenant nous allons pouvoir évoluer. Ce qui suit est très intéressant.

LA SUITE APRÈS CETTE PUBLICITÉ

Troisième étape : Définissez le comportement de votre grille selon le type d’affichage de votre écran 

Bootstrap a défini au préalable différents contextes pour l’utilisation de la grille.

Je vais être plus explicite.

Bootstrap vous permet de travailler avec des tailles de colonnes différentes en fonction des différentes tailles des écrans.

Voici les différentes directives à utiliser en fonction des tailles d’écran souhaitées :

Classes	Types d’écrans d’affichage
.col-	classe utilisée pour les écrans inférieurs à 576px
.col-sm-	classe utilisée pour les écrans supérieurs ou égaux à 576px
.col-md-	classe utilisée pour les écrans supérieurs ou égaux à 768px
.col-lg-	classe utilisée pour les écrans supérieurs ou égaux à 992px
.col-xl-	classe utilisée pour les écrans supérieurs ou égaux à 1200px

Ces classes sont des directives responsives.

Exemple 4 :

Nous allons créer une grille d’une ligne qui affiche :

• Sur un écran large 4 colonnes de mêmes tailles
• Sur un écran de taille moyenne : les 4 colonnes auront les mêmes tailles, mais les 2 premières doivent repousser les 2 autres en dessous.
• Et sur les écrans de petite taille, les 4 colonnes auront les mêmes tailles mais chaque colonne doit repousser la suivante en dessous.

Ça serait bien d’essayer en local avant de voir le résultat.   

<div class="container">
		<div class="row">
			<div class="col-12 col-md-6 col-lg-3 border">
				<p>Première Colonne</p>
			</div>
			<div class="col-12 col-md-6 col-lg-3 border">
				<p>Deuxième Colonne</p>
			</div>
			<div class="col-12 col-md-6 col-lg-3 border">
				<p>Troisième Colonne</p>
			</div>
			<div class="col-12 col-md-6 col-lg-3 border">
				<p>Quatrième Colonne</p>
			</div>
		</div>
</div>

La partie qui suit est un exercice qui va vous permettre de mettre en pratique tout ce que vous venez d’apprendre.

Du coup s’il le faut, relisez bien du début jusqu’à ce niveau pour bien comprendre le système de grille de Bootstrap avant de passer à l’exercice.

Exercice :

 Créez une grille d’une ligne contenant 3 colonnes qui respectent les indications suivantes :

1. Écran Large :
2. Première colonne : Taille 3
3. Deuxième colonne : Taille 5
4. Troisième Colonne : Taille 4
5. Écran de taille moyenne :

Les trois colonnes doivent toutes avoir les mêmes tailles

• Écran de petite taille :
• Première colonne : Taille 3
• Deuxième colonne : Taille 3
• Troisième Colonne : Taille 6

Si vous pratiquez, vous maîtriserez, pour cela faites l’exercice avant de voir la correction.

Correction :

<div class="container">
	<div class="row">
		<div class="col-3 col-md-4 col-lg-3 border">
			<p>Première Colonne</p>
		</div>
		<div class="col-3 col-md-4 col-lg-5 border">
			<p>Deuxième Colonne</p>
		</div>
		<div class="col-6 col-md-4 col-lg-4 border">
			<p>Troisième Colonne</p>
		</div>
	</div>
</div>

Ce tutoriel vous a-t-il été bénéfique, si oui alors faites le découvrir à vos amis en le partageant sur les réseaux sociaux par le biais des boutons de partage ci-dessous.