Gérer l’alignement vertical des colonnes dans une ligne

Par défaut, les colonnes vont occuper toute la hauteur d’une ligne. On va cependant pouvoir
demander aux colonnes de n’occuper que la place nécessaire à leur contenu et de s’aligner soit au
début, soit au milieu, soit en fin de ligne selon l’axe vertical.
Pour aligner toutes les colonnes en même temps par rapport à une ligne, nous allons appliquer
les classes .align-items-* à nos lignes. Nous pouvons choisir parmi trois classes qui
représentent trois positions différentes :
• .align-items-start : les colonnes seront alignées en début (en haut) de la ligne ;
• .align-items-center : les colonnes vont être alignées au centre de la ligne ;
• .align-items-end : les colonnes seront alignées en fin (en bas) de la ligne.

Pour aligner chaque colonne individuellement, nous allons cette fois-ci plutôt utiliser les classes
.align-self-* qu’on va utiliser avec chaque élément cette fois-ci. Là encore, nous pouvons
choisir parmi trois classes :
• .align-self-start : la colonne sera alignée en début (en haut) de la ligne ;
• .align-self-center : la colonne va être alignée au centre de la ligne ;
• .align-self-end : la colonne sera alignée en fin (en bas) de la ligne.

<style>
.custom-line{
min-height: 5rem;
margin-bottom: 1rem;
background-color: RGBa(60,240,160,0.7); /*Vert*/
}
.custom-line > .col{
background-color: RGBa(60,120,240,0.7); /*Bleu*/
}
</style>

<div class="row align-items-start custom-line">

<div class="col">Colonne 1/2</div>
<div class="col">Colonne 2/2</div>
</div>

.custom-line pour ajouter des styles personnalisés à nos lignes

.custom-line > .col pour ajouter des styles personnalisés à nos colonnes
sans polluer le reste de la page

Gérer l’alignement horizontal des colonnes

dans une ligne
On va principalement vouloir aligner horizontalement des colonnes dans une ligne dans le cas où
colonnes créées n’occupent pas tout l’espace de la ligne, c’est-à-dire dans le cas où il reste de
l’espace à distribuer entre les colonnes.
On va pouvoir aligner horizontalement nos colonne dans la ligne grâce aux classes .justify-
content-* qu’on va devoir appliquer à la ligne en soi. Nous allons pouvoir utiliser les classes
suivantes :
• .justify-content-start : les colonnes vont se positionner en début de ligne (à
gauche par défaut) ;
• .justify-content-center : les colonnes vont se positionner au milieu de la ligne ;
• .justify-content-end : les colonnes vont se positionner en fin de ligne (à droite par
défaut) ;
• .justify-content-around : les colonnes vont être réparties équitablement dans la
ligne. Chaque colonne va posséder le même écart à droite et à gauche, même celles situées
contre les bords de la ligne (l’espacement entre le bord de la ligne et la première / dernière
colonnes sera donc deux fois plus petit que l’espacement entre deux colonne) ;
• .justify-content-between : les colonnes vont être réparties équitablement dans la
ligne. La première colonne va être collée contre le début de la ligne et la dernière va être
collée contre la fin de celle-ci.
<div class="container">
<div class="row justify-content-start custom-line">
<div class="col-4"><p>justify-content-start 1/2</p></div>
<div class="col-4"><p>justify-content-start 2/2</p></div>
</div>

Supprimer les gouttières ou padding entre les colonnes

Les gouttières sont des espaces situés de part et d’autre du contenu de chacune de nos colonnes. De
manière effective, elles sont représentées par une propriété padding. Elles servent à espacer les
contenus des différentes colonnes.
Par défaut, un padding gauche et droit de 15px est affecté à chaque colonne créée. Cette
marge intérieure est contrebalancée au niveau de la ligne en affectant automatiquement un margin
gauche et droit de -15px (négatif donc) sur chaque ligne. Cela permet d’obtenir une consistance
dans l’alignement des éléments.
On peut néanmoins choisir de supprimer les gouttières entre les colonnes en appliquant la classe
.no-gutters à l’élément représentant la ligne en soi. Cela va supprimer le padding gauche et
droit des éléments enfants directs de l’élément représentant la ligne. Les marges négatives
appliquées par défaut sur la ligne vont également être supprimées.
La classe .mt-3 sert simplement à ajouter une marge externe supérieure pour espacer nos
deux lignes.
L pudding par def mayetzed kn fi des colonnes et ligns normales fihomch alignement
horizental ou verticale
<div class="row no-gutters mt-3">
<div class="col">Colonne 1</div>
<div class="col">Colonne 2</div>
<div class="col">Colonne 3</div>
</div>
Renvoyer des colonnes à la ligne
Nous allons pouvoir forcer le renvoi de colonnes à la ligne en utilisant un hack qui consiste à insérer
un élément avec une largeur de 100% à l’endroit où l’on souhaite renvoyer les colonnes à la
ligne. Pour cela, nous utiliserons généralement un div entre nos colonnes ainsi que les classes
relatives aux dimensions Bootstrap (en l’occurence ici la classe .w-100) dont nous reparlerons
plus tard dans ce cours.

<div class="w-100"></div>
<div class="col-3 border bg-warning"><p>.col-3</p></div>
<div class="col-3 border bg-warning"><p>.col-3</p></div>
les 2 derniers sront forces a retourner a la ligne