Bootstrap - Colonnes : Créer des mises en page réactives avec facilité

Salut à toi, futur développeur web ! Aujourd'hui, nous allons plonger dans une des fonctionnalités les plus puissantes de Bootstrap : les colonnes. En tant que ton professeur d'informatique du coin, je suis excité de te guider dans cette aventure. Fais-moi confiance, à la fin de ce tutoriel, tu seras capable de créer des mises en page réactives comme un pro !

Comment ça marche

Avant de rentrer dans les détails, comprenons les bases. Le système de grille de Bootstrap est basé sur une mise en page de 12 colonnes. Penses-y comme si tu divises une pizza en 12 parts - tu peux les manger toutes toi-même (une colonne pleine largeur) ou les partager avec des amis (plusieurs colonnes).

Voici un exemple simple pour commencer :

<div class="container">
<div class="row">
<div class="col-sm-4">Colonne 1</div>
<div class="col-sm-4">Colonne 2</div>
<div class="col-sm-4">Colonne 3</div>
</div>
</div>

Dans cet exemple, nous avons créé trois colonnes de largeur égale sur les petits écrans et plus. La classe col-sm-4 signifie "prendre 4 des 12 colonnes sur les petits écrans". C'est comme dire, "Je prendrai 4 parts de cette pizza de 12 parts, s'il vous plaît !"

Alignement

Maintenant que nous avons nos colonnes, apprenons à les aligner. C'est comme arrangez le mobilier dans une pièce - vous voulez que tout ait l'air juste parfait !

Alignement vertical

Pour aligner les colonnes verticalement, nous utilisons des classes sur la rangée :

<div class="container">
<div class="row align-items-start">
<div class="col">Haut</div>
<div class="col">Haut</div>
<div class="col">Haut</div>
</div>
<div class="row align-items-center">
<div class="col">Milieu</div>
<div class="col">Milieu</div>
<div class="col">Milieu</div>
</div>
<div class="row align-items-end">
<div class="col">Bas</div>
<div class="col">Bas</div>
<div class="col">Bas</div>
</div>
</div>

Ici, nous utilisons align-items-start, align-items-center, et align-items-end pour aligner nos colonnes en haut, au milieu, et en bas de la rangée, respectivement.

Alignement horizontal

Pour l'alignement horizontal, nous utilisons des classes de justification du contenu :

<div class="container">
<div class="row justify-content-start">
<div class="col-4">Un</div>
<div class="col-4">Deux</div>
</div>
<div class="row justify-content-center">
<div class="col-4">Un</div>
<div class="col-4">Deux</div>
</div>
<div class="row justify-content-end">
<div class="col-4">Un</div>
<div class="col-4">Deux</div>
</div>
</div>

Ces classes (justify-content-start, justify-content-center, justify-content-end) alignent nos colonnes à gauche, au centre, et à droite du conteneur.

Empilage des colonnes

Parfois, tu pourrais avoir plus de 12 unités de colonne dans une rangée. Ne t'inquiète pas, Bootstrap est là pour t'aider ! Il empilera automatiquement les colonnes supplémentaires sur une nouvelle ligne :

<div class="container">
<div class="row">
<div class="col-9">Colonne 1</div>
<div class="col-4">Colonne 2</div>
<div class="col-6">Colonne 3</div>
</div>
</div>

Dans cet exemple, 9 + 4 = 13, ce qui est plus que 12, donc la deuxième colonne s'empile sur une nouvelle ligne.

Sauvegarde de colonne

Mais que faire si tu veux forcer un nouveau ligne toi-même ? Voici la sauvegarde de colonne :

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

Le <div class="w-100"></div> crée une rupture de largeur 100%, forçant les prochaines colonnes à démarrer sur une nouvelle ligne.

Réorganisation

Classes d'ordre

Bootstrap te permet de modifier l'ordre visuel de tes colonnes :

<div class="container">
<div class="row">
<div class="col order-3">Premier, mais dernier</div>
<div class="col order-2">Deuxième, mais second</div>
<div class="col order-1">Troisième, mais premier</div>
</div>
</div>

Les classes order- déterminent l'ordre des colonnes. C'est comme demander à tes colonnes de jouer à la chaise musicale !

Décalage des colonnes

Classes de décalage

Parfois, tu peux vouloir ajouter un peu d'espace avant une colonne. C'est là que les classes de décalage entrent en jeu :

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
</div>

La classe offset-md-4 ajoute une marge-gauche équivalente à 4 colonnes, poussant notre deuxième colonne vers la droite.

Nettoyage des colonnes aux points de rupture réactives

Alors que ta mise en page change à travers différents tailles d'écran, tu pourrais avoir besoin de nettoyage des colonnes flottantes :

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

Ici, d-none d-md-block cache la rupture sur les petits écrans mais la montre sur les écrans medium et plus.

Utilitaires de margin

Bootstrap fournit des utilitaires de marge pour des ajustements rapides de l'espacement :

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
</div>

La classe ml-auto pousse la deuxième colonne vers la droite en ajustant automatiquement sa marge gauche.

Classes de colonne autonome

Enfin, tu peux utiliser des classes de colonne sans wrappers de rangée pour plus de flexibilité :

<div class="container">
<div class="col-3 bg-light p-3 border">
.col-3: largeur de 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: largeur de 75% au-dessus du point de rupture sm
</div>
</div>

Cette approche te donne plus de contrôle sur ta mise en page, surtout pour les designs complexes.

Et voilà, les amis ! Tu viens d'apprendre les inside-outs des colonnes de Bootstrap. Souviens-toi, la pratique fait toujours parfaite, alors n'hesite pas à expérimenter avec ces concepts. Bientôt, tu seras créer des mises en page réactives qui rendraient jaloux même les développeurs web les plus chevronnés !

Voici un tableau de référence rapide des classes de colonne que nous avons couvertes :

Classe	Description
col-*	Classe de colonne de base (* peut être 1-12)
col-sm-*	Colonnes pour les petits écrans et plus
col-md-*	Colonnes pour les écrans medium et plus
col-lg-*	Colonnes pour les écrans large et plus
col-xl-*	Colonnes pour les écrans extra-large
offset--	Colonnes décalées (* peut être sm, md, lg, xl)
order-*	Réorganisation des colonnes (* peut être 1-12)

Bonne programmation, et puissent tes layouts toujours être réactifs !

Credits: Image by storyset