Gérer les alignements avec Bootstrap4

Avant que nous ne commencions par voir comment aligner les éléments d’une grille ou d’une flexbox, apportons d’abord un éclairci sur les axes principal et secondaire, utiles pour la compréhension de la gestion des alignements avec Bootstrap4.

La flexbox fait intervenir un axe principal et un axe secondaire pour la gestion de son contenu. C’est la direction spécifiée à la flexbox qui détermine l’axe principal et une fois l’axe principal déterminé, l’axe secondaire est l’axe qui lui ait perpendiculaire.

Ainsi si les éléments de la flexbox sont placés dans une direction horizontale alors l’axe principal est l’axe horizontal et l’axe secondaire est l’axe vertical, mais si les éléments de la flexbox sont placés en colonnes c’est-à-dire dans une direction verticale alors l’axe principal est l’axe vertical et l’axe secondaire est l’axe horizontal.

Maintenant que nous savons comment la flexbox définit les axes, nous allons voir comment aligner ses éléments suivant ces axes.

Aligner les éléments de la flexbox de bootstrap4 à l’aide de la classe .justify-content-(suffixe) :

La classe .justify-content-(suffixe) permet d’aligner les éléments de la flexbox sur l’axe principal. La valeur du suffixe vous permet selon votre désir de changer l’alignement des éléments le long de l’axe principal.

Les différentes valeurs que peut prendre le suffixe sont : start, end, between, center, around.

Découvrez leur rôle :

.justify-content-start : Cette classe permet d’aligner les éléments au début de l’axe principal

Exemple :

<div class="d-flex bg-dark justify-content-start">      	
    	<div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gérer l'alignement avec la classe .justify-content-start

.justify-content-end : elle aligne les éléments à la fin de l’axe principal

Exemple :

<div class="d-flex bg-dark justify-content-end">      	
    	<div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gérer l'alignement avec .justify-content-end

.justify-content-center : elle aligne les éléments au milieu de l’axe principal

Exemple :

<div class="d-flex bg-dark justify-content-center">      	
    	<div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gerer l'alignement avec .justify-content-center

.justify-content-between : cette classe répartie l’espace disponible le long de l’axe principal de façon équitable entre les éléments.

Exemple :

<div class="d-flex bg-dark justify-content-between">      	
    	<div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gerer l'alignement avec .justify-content-between

.justify-content-around : elle répartie l’espace disponible autour des éléments.

Exemple :

<div class="d-flex bg-dark justify-content-around">      	
    	<div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gérer l'alignement avec .justify-content-around

Aligner les éléments de la flexbox de bootstrap4 à l’aide de la classe .align-items-( suffixe) :

Cette classe permet d’aligner les éléments de la flexbox sur l’axe secondaire. Les différentes valeurs que peut prendre le suffixe sont : start, end, baseline, center, stretch.

Découvrez en exemple de comportement de chacun.

.align-items-start : elle aligne les éléments au début de l’axe secondaire

Exemple : Dans cet exemple nous allons disposer les éléments verticalement, du coup l’axe secondaire est l’axe horizontal.

<div class="d-flex bg-dark flex-column align-items-start">      	
    	<div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gérer l'alignement avec .align-items-start

.align-items-end : cette classe aligne les éléments à la fin de l’axe secondaire

Exemple :

<div class="d-flex bg-dark flex-column align-items-end">      	
    	<div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

Gerer l'alignement avec .align-items-end

.align-items-center : comme vous l’avez devinez, elle aligne les éléments au milieu de l’axe secondaire.

Exemple :

<div class="d-flex bg-dark flex-column align-items-center">      	
    	<div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gérer l'alignement avec .align-items-center

.align-items-stretch : elle étire les éléments le long de l’axe secondaire, c’est le comportement qu’adoptent les éléments par défaut.

Exemple :

<div class="d-flex bg-dark flex-column align-items-stretch">      	
    	<div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gérer l'alignement avec .align-items-stretch

.align-items-baseline : elle joue le même rôle que .align-items-start, elle dispose l’élément sur la ligne de base.

Exemple :

<div class="d-flex bg-dark flex-column align-items-baseline">      	
    	<div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gérer l'alignement avec .align-items-baseline

Aligner les éléments de la flexbox de bootstrap4 à l’aide de la classe .align-self-( suffixe) :

Vous remarquerez qu’avec les classes précédentes, ce sont tous les éléments du conteneur qui sont alignés en même temps, c’est tout le contraire avec la classe .align-self-( suffixe).

Elle permet d’aligner un des éléments sur l’axe secondaire. Son suffixe prend les mêmes valeurs que celle de .align-items-( suffixe).

.align-self-start : elle positionne l’élément au début de l’axe secondaire

Exemple :

<div class="d-flex bg-dark flex-column">      	
          <div class="bg-danger align-self-start">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gérer l'alignement avec .align-self-start

.align-self-end : elle positionne l’élément à la fin de l’axe secondaire

Exemple :

<div class="d-flex bg-dark flex-column">      	
          <div class="bg-danger align-self-end">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gérer l'alignement avec .align-self-end

.align-self-center : elle positionne l’élément au centre de l’axe secondaire

Exemple :

<div class="d-flex bg-dark flex-column">      	
          <div class="bg-danger align-self-center">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gérer l'alignement avec .align-sef-center

.align-self-stretch : elle étire l’élément le long de l’axe secondaire

Exemple :

<div class="d-flex bg-dark flex-column">      	
          <div class="bg-danger align-self-stretch">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gérer l'alignement avec .align-self-stretch

.align-self-baseline : elle positionne l’élément sur la ligne de base de l’axe secondaire(son rôle est similaire à .align-self-start)

Exemple :

<div class="d-flex bg-dark flex-column">      	
          <div class="bg-danger align-self-baseline">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Résultat :

gérer l'alignement avec .align-self-baseline

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.