Bootstrap

Alignement avec Bootstrap

Un cours complet pour maîtriser Alignement avec Bootstrap.

0 chapitres 0 QCM Accès gratuit

Objectifs
- Etre capable d'aligner verticalement et horizontalement des éléments avec la grille de Bootstrap 5.3
Présentation
- Le framework Bootstrap dans sa version 5.3 repose entièrement sur le modèle des flexbox pour la grille (.row est un conteneur flex) afin de faciliter la disposition des éléments dans la page.
- Grâce à quelques classes utilitaires fournies par le framework, on peut centrer à la fois verticalement et horizontalement un élément dans son élément parent, sans écrire une seule ligne de CSS.
- Contrairement à la version 4, Bootstrap 5.3 ne dépend plus de jQuery : un seul fichier JavaScript (bootstrap.bundle.min.js, qui inclut Popper) suffit.
Alignement Vertical d’un contenu avec Bootstrap
- Pour aligner les éléments verticalement, Bootstrap 5.3 propose différentes techniques, telles que:
  1. Marges automatiques combinées avec Flexbox (centrer verticalement en utilisant les marges automatiques)
    - Exemple : le bloc est centré verticalement (my-auto) et horizontalement (mx-auto) dans un parent d-flex de 200px de haut.
```
<div class="d-flex bg-light border" style="height: 200px;">
  <div class="my-auto mx-auto p-3 bg-primary text-white rounded">
    Je suis centré avec my-auto et mx-auto
  </div>
</div>
```
  2. Utilitaires Flex (d-flex, align-items-*, align-self-*, justify-content-*, align-content-*)
    - Exemple : align-items-center centre verticalement les enfants, justify-content-center les centre horizontalement, et align-self-end place le dernier élément en bas.
```
<div class="d-flex align-items-center justify-content-center gap-2 bg-light border" style="height: 200px;">
  <div class="p-2 bg-success text-white rounded">Élément 1</div>
  <div class="p-2 bg-success text-white rounded">Élément 2</div>
  <div class="p-2 bg-danger text-white rounded align-self-end">align-self-end</div>
</div>
```
  3. Utilitaires d'alignement vertical (align-baseline, align-top, align-middle, align-bottom, align-text-top, align-text-bottom) permettant de modifier l'alignement vertical des éléments inline, inline-block, inline-table et des cellules de tableau, combinés à des utilitaires d'affichage
    - Exemple 1 (éléments inline) : chaque mot est aligné différemment par rapport à la ligne de texte.
```
<p class="fs-2">
  Texte
  <span class="fs-6 align-baseline">baseline</span>
  <span class="fs-6 align-top">top</span>
  <span class="fs-6 align-middle">middle</span>
  <span class="fs-6 align-bottom">bottom</span>
  <span class="fs-6 align-text-top">text-top</span>
  <span class="fs-6 align-text-bottom">text-bottom</span>
</p>
```
    - Exemple 2 (cellules de tableau) : la classe s’applique sur la cellule <td> ou sur toute la ligne / le tableau.
```
<table class="table table-bordered" style="height: 120px;">
  <tbody>
    <tr>
      <td class="align-top">align-top</td>
      <td class="align-middle">align-middle</td>
      <td class="align-bottom">align-bottom</td>
    </tr>
  </tbody>
</table>
```
    - Exemple 3 (combiné à un utilitaire d’affichage) : d-inline-block rend l’élément sensible à align-middle, pratique pour aligner une icône avec un texte.
```
<p>
  <span class="d-inline-block align-middle bg-warning rounded-circle" style="width: 40px; height: 40px;"></span>
  <span class="align-middle">Texte aligné au milieu de la pastille</span>
</p>
```
- Bootstrap 5.3 est fourni avec des classes par défaut pour faciliter considérablement le centrage vertical de votre contenu.
- Les principales classes à surveiller sont les classes "d-flex" et "align-items-center".
  - Exemple : le centrage le plus courant, vertical et horizontal, en trois classes.
```
<div class="d-flex align-items-center justify-content-center bg-light border" style="height: 150px;">
  <p class="m-0">Contenu parfaitement centré</p>
</div>
```
- Toutes ces classes existent aussi en version responsive : align-items-{sm|md|lg|xl|xxl}-center, justify-content-md-end, etc. (le point de rupture xxl est apparu avec Bootstrap 5).
  - Exemple : sur mobile, les colonnes sont alignées en haut et à gauche ; à partir du point de rupture md (768px), elles sont centrées verticalement et poussées à droite.
```
<div class="row align-items-start align-items-md-center justify-content-start justify-content-md-end bg-light border" style="height: 150px;">
  <div class="col-4 bg-info text-white">Colonne 1</div>
  <div class="col-4 bg-info text-white">Colonne 2</div>
</div>
```

Centrer verticalement en utilisant les marges automatiques
- L'un des moyens de centrer verticalement consiste à utiliser my-auto qui permet de centrer l'élément dans son conteneur flex.

my-auto représente les marges sur l'axe des y vertical et est équivalent à:margin-top: auto; margin-bottom: auto;

align-items
- La propriété align-items permet d’aligner les éléments flexibles d’une ligne ou d’une colonne flexible.
- On dispose principalement de 3 classes pour aligner verticalement au niveau d’une ligne
  - align-items-start: alignement en haut
  - align-items-center: alignement au milieu
  - align-items-end: alignement en bas
- Bootstrap 5.3 propose aussi align-items-baseline (alignement sur la ligne de base du texte) et align-items-stretch (les colonnes s’étirent sur toute la hauteur : c’est le comportement par défaut d’un conteneur flex).
- Exemple

<!doctype html>
<html lang="fr">
  <head>
    <!-- Balises meta requises -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 5.3 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <!-- Bootstrap Icons (remplace Font Awesome 4.7) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <title>Bonjour tout le monde!</title>
    <style>
    .rowCouleur{
      height: 120px;
      background-color: rgba(255,0,0,0.1);
      border: 2px solid rgba(245, 8, 8, 0.5);
    }
    .colCouleur{
      height: 40px;
      background-color: rgba(255,0,0,0.1);
      border: 2px solid blue;
      border-radius: 6px;
    }
    </style>
  </head>
  <body>

    <div class="container">
      <div class="row align-items-start rowCouleur">
        <div class="col colCouleur">
          align-items-start
        </div>
        <div class="col colCouleur">
          align-items-start
        </div>
      </div>
      <p></p>
      <div class="row align-items-center rowCouleur">
        <div class="col colCouleur">
          align-items-center
        </div>
        <div class="col colCouleur">
          align-items-center
        </div>
      </div>
      <p></p>
      <div class="row align-items-end rowCouleur">
        <div class="col colCouleur">
          align-items-end
        </div>
        <div class="col colCouleur">
          align-items-end
        </div>
      </div>
    </div>

    <!-- Bootstrap 5.3 JS (Popper inclus, plus besoin de jQuery) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Résultat

Alignement avec Bootstrap

Aligner individuellement avec Bootstrap
- align-self permet d’aligner un élément flexible individuellement sur une même rangée, en remplaçant la valeur définie par align-items sur le parent.
- Avec align-self on peut traiter chaque élément individuellement en utilisant:
  - align-self-start: aligne l’élément au début du conteneur Flex
  - align-self-center: est responsable du centrage de l'élément Flex dans son conteneur.
  - align-self-end: aligne l’élément à la fin du conteneur flexible
  - On dispose aussi de align-self-baseline et align-self-stretch.
  - Exemple:

<!doctype html>
<html lang="fr">
  <head>
    <!-- Balises meta requises -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 5.3 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <!-- Bootstrap Icons (remplace Font Awesome 4.7) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <title>Bonjour tout le monde!</title>
    <style>
    .rowCouleur{
      height: 120px;
      background-color: rgba(255,0,0,0.1);
      border: 2px solid rgba(245, 8, 8, 0.5);
    }
    .colCouleur{
      height: 40px;
      background-color: rgba(255,0,0,0.1);
      border: 2px solid blue;
      border-radius: 6px;
    }
    </style>
  </head>
  <body>

    <div class="container">
      <div class="row align-items-start rowCouleur">
        <div class="col colCouleur align-self-start">
          align-self-start
        </div>
        <div class="col colCouleur align-self-center">
          align-self-center
        </div>
        <div class="col colCouleur align-self-end">
          align-self-end
        </div>
      </div>
    </div>

    <!-- Bootstrap 5.3 JS (Popper inclus, plus besoin de jQuery) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Résultat:

Aligner horizontalement avec Bootstrap (les colonnes)
- Les classes utilitaires Bootstrap permettant d’appliquer des valeurs justify-content aux éléments sont les suivantes:
  - justify-content-start: positionne la colonne à gauche
  - justify-content-center: positionne la colonne au centre
  - justify-content-end: positionne la colonne à droite
  - justify-content-around: distribue l’espace de façon équitable. Tous les objets ont le même espace de chaque côté.
  - justify-content-between: dispose le premier objet au début de l’axe et le dernier à la fin de l’axe.
  - justify-content-evenly (nouveau dans Bootstrap 5) : l’espace entre chaque objet, et entre les bords et les objets, est strictement identique.
- Exemple:

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <title>Alignement horizontal</title>
    <style>
    .rowCouleur{
      background-color: rgba(255,0,0,0.1);
      border: 2px solid rgba(245, 8, 8, 0.5);
      margin-bottom: 10px;
    }
    .colCouleur{
      background-color: rgba(255,0,0,0.1);
      border: 2px solid blue;
      border-radius: 6px;
    }
    </style>
  </head>
  <body>

    <div class="container">
      <div class="row justify-content-start rowCouleur">
        <div class="col-4 colCouleur">Une colonne</div>
        <div class="col-4 colCouleur">Une colonne</div>
      </div>
      <div class="row justify-content-center rowCouleur">
        <div class="col-4 colCouleur">Une colonne</div>
        <div class="col-4 colCouleur">Une colonne</div>
      </div>
      <div class="row justify-content-end rowCouleur">
        <div class="col-4 colCouleur">Une colonne</div>
        <div class="col-4 colCouleur">Une colonne</div>
      </div>
      <div class="row justify-content-around rowCouleur">
        <div class="col-4 colCouleur">Une colonne</div>
        <div class="col-4 colCouleur">Une colonne</div>
      </div>
      <div class="row justify-content-between rowCouleur">
        <div class="col-4 colCouleur">Une colonne</div>
        <div class="col-4 colCouleur">Une colonne</div>
      </div>
      <div class="row justify-content-evenly rowCouleur">
        <div class="col-4 colCouleur">Une colonne</div>
        <div class="col-4 colCouleur">Une colonne</div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Résultat:

align-items, justify-content et align-content

La propriété align-items permet d’aligner les éléments flexibles d’une ligne ou d’une colonne flexible. Elle fonctionne de la même façon que justify-content mais dans la direction orthogonale. Cette propriété définit l’alignement des objets à l’intérieur de la ligne ou de la ligne flexible courante alors que align-content définit l’alignement des lignes/colonnes entre elles. Dans Bootstrap 5.3, align-content s’utilise avec les classes align-content-start, align-content-center, align-content-end, align-content-between, align-content-around et align-content-stretch, et n’a d’effet que sur un conteneur flex qui passe à la ligne (flex-wrap).

Alignement avec Bootstrap

Dans cet article

Sommaire du cours

Autres catégories

Objectifs

Présentation

Alignement Vertical d’un contenu avec Bootstrap

Centrer verticalement en utilisant les marges automatiques

align-items

Aligner individuellement avec Bootstrap

Aligner horizontalement avec Bootstrap (les colonnes)

align-items, justify-content et align-content

Sommaire du cours Bootstrap