Bootstrap 5 : Mises en formes

Mises en formes de Bootstrap

Objectif

Découverte des mises en forme de Bootstrap.
Textes.
Couleurs, Bordures.
Gestion du display.
Positionnement et visibilité.

1. Styles CSS par défaut

Bootstrap applique automatiquement des styles CSS aux éléments HTML via deux types de sélecteurs :

Sélecteurs d’éléments : définis dans le fichier Reboot (inspiré de Normalize), ils assurent une uniformité d’affichage entre navigateurs en appliquant des styles de base aux éléments HTML.
Sélecteurs de classes : Nécessitent l’ajout explicite d’une classe Bootstrap sur un élément pour lui appliquer un style spécifique.

1.1. Styles généraux de la page

Les éléments HTML reçoivent la règle box-sizing : border-box par défaut qui empêche un élément de dépasser sa taille définie par width et height.

Le fichier Reboot applique des styles globaux au body :

Police d’écriture, interlignes, marges externes, couleur de fond.
Hérités par tous les éléments du body pour assurer la cohérence du design.

Recherchez dans bootstrap.ccs les règles de rédéfinition de body (cherchez les premières occurence de body { ou --bs-body)

font-size est exprimé en rem, basé sur la taille définie dans l’élément <html> . Bootstrap n’impose pas de taille de police sur <html>, se basant sur la valeur par défaut des navigateurs (généralement 16px).

Les familles de polices sont appliquées selon l’OS :

macOS & iOS : -apple-system
Windows : "Segoe UI"
Android : "Roboto"
Par défaut : "Helvetica Neue", Arial, sans-serif
Pour les émojis : "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

1.2. Styles des éléments HTML

bootstrap.css fixe par exemple des règles comme

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}

Les différents éléments HTML reçoivent des rêgles CSS en vue d’harmoniser le rendu sur tous les navigateurs.

2. Classes Bootstrap pour styliser le texte

2.1. Mise en valeur des titres et paragraphes

Les classes :

.display-1 à .display-4 : agrandissent les titres.
.h1 à .h6 : appliquent les styles des titres à d’autres éléments.
.lead : met en avant un paragraphe.

Dans un nouveau fichier html, placez un titre <h2> puis le même avec les classes .display-1 à .display-4. Faites de même avec un paragraphe, le même avec .lead et le même avec .h2.

2.2. Modification de la casse

Avec les classes suivantes, un texte est :

.text-lowercase : tout en minuscules.
.text-uppercase : tout en majuscules.
.text-capitalize : première lettre de chaque mot en majuscule.

Complétez le fichier html précédent avec le paragraphe "Ceci est un texte" avec chacune des classes précédentes.

2.3. Alignement du texte

Pour aligner un texte dans son élément parent on utilise :

.text-start, .text-center, .text-end : alignement classique.
Variantes responsives : ajouter -sm-, -md-, -lg-, -xl-, -xxl- pour ajuster selon la taille d’écran.

⚠️ Bootstrap 5, ne propose pas de justification de texte. Il faut utiliser une règle CSS native avec style="text-align: justify".

Complétez le fichier html précédent, avec un paragraphe long (tapez lorem dans VSCode pour une complétion par Emmet), aligné à gauche, au centre, ou à droite. Testez aussi les classes text-sm-start et text-xl-end conjointement.

Un texte ne dépasse normalement par de son conteneur. Les classes .text-nowrap et .text-truncate modifient ce comportement.

Complétez le fichier html avec :

<div class="container">
    <div class="row">
        <div class="col-3 border">
            <p>Par défaut, un texte plus long que son conteneur ne dépassera pas en largeur mais viendra se positionner
                sur
                une nouvelle ligne</p>
        </div>
        <div class="col-3 text-truncate border">
            <p>La classe .text-truncate va tronquer un texte si celui-ci est plus grand que son conteneur</p>
        </div>
        <div class="col-3 text-nowrap border">
            <p>La classe .text-nowrap va permettre à un texte de dépasser de son conteneur</p>
        </div>
        <div class="col-3 border">
        </div>
    </div>
</div>

et observez la gestion des dépassements

3. Couleurs et opacités

Bootstrap propose des classes de couleurs contextuelles pour donner du sens aux éléments grâce à des couleurs associées à des notions (ex. : rouge pour le danger avec .text-danger).

3.1. Modifier la couleur d’un texte

Les classes suivantes permettent de changer la couleur d’un texte :

Couleurs principales :
- .text-primary (bleu)
- .text-secondary (gris-bleu)
- .text-success (vert)
- .text-danger (rouge)
- .text-warning (jaune)
- .text-info (bleu clair)
Nuances et transparence :
- .text-light (gris clair)
- .text-dark (gris foncé) *.text-body (noir)
- .text-muted (gris)
- .text-white (blanc)
- .text-black-50 et .text-white-50 (noir et blanc semi-transparents).

Ces classes peuvent être appliquées à n’importe quel texte, y compris aux liens. Cependant, .text-white et .text-muted ne changent pas de couleur au survol ou au clic.

Testez ce bloc de code dans un nouveau fichier html.

3.2. Modifier la couleur de fond

Pour changer la couleur de fond d’un élément, on utilise les mêmes couleurs avec le préfixe .bg- (ex. : .bg-primary, .bg-danger).

Attention : Modifier la couleur de fond n’adapte pas automatiquement la couleur du texte, il faut l’ajuster manuellement pour assurer la lisibilité. Les liens avec un fond coloré foncent au survol.

Cas particuliers, certains composants Bootstrap, comme les boutons, disposent de leurs propres classes de couleur basées sur ce principe, que nous verrons plus tard.

Testez ce bloc de code dans un nouveau fichier html.

4. Contrôle des dimensions

Bootstrap ne permet pas un contrôle total des tailles, mais propose des classes pour ajuster la largeur et la hauteur d’un élément par rapport à son parent ou au viewport (écran ou fenêtre de navigateur).

Taille relative au parent
- Largeur : .w-25 (25%), .w-50 (50%), .w-75 (75%), .w-100 (100%), .w-auto (automatique).
- Hauteur : .h-25 (25%), .h-50 (50%), .h-75 (75%), .h-100 (100%), .h-auto (automatique).
Taille relative au viewport
- Largeur : .vw-100 (100% du viewport), .min-vw-100 (largeur min 100% du viewport).
- Hauteur : .vh-100 (100% du viewport), .min-vh-100 (hauteur min 100% du viewport).

Testez ce bloc de code dans un nouveau fichier html.

Complétez cet essai avec une ligne de 5 colonnes de largeur automatique contenant des éléments div avec chacune des largeurs posibles.

5. Bordures des éléments

Bootstrap permet d’ajouter facilement des bordures aux éléments HTML grâce aux classes .border*.

5.1. Ajouter une bordure

.border : ajoute une bordure grise tout autour d’un élément.
.border-top, .border-start, .border-bottom, .border-end : ajoute une bordure uniquement sur un côté spécifique.

` Testez ce bloc de code dans un nouveau fichier html.

5.2. Supprimer une bordure

Pour supprimer une bordure, ajoutez -0 à la classe correspondante :

.border-0 : supprime toutes les bordures.
.border-top-0, .border-start-0, .border-bottom-0, .border-end-0 : supprime une bordure spécifique.

⚠️ Une bordure doit être ajoutée avant de pouvoir la supprimer.

` Testez ce bloc de code dans le fichier html précédent.

Complétez ce fichier avec des paragraphes dotés de 2 bordures verticales ou horizontales. 2 solutions sont possibles à chaque fois.

5.3. Couleur d’une bordure

On utilise ici les couleurs contextuelles de Bootstrap avec les classes : .border-primary (bleu), .border-success (vert), .border-danger (rouge), .border-warning (jaune), etc.

⚠️ Ces classes colorent uniquement une bordure existante, il faut donc ajouter .border.

` Testez ce bloc de code dans le fichier html précédent.

5.4. Arrondir les bordures

Pour des bordures existantes, les classes :

.rounded : arrondit légèrement les coins.
.rounded-top, .rounded-right, .rounded-bottom, .rounded-left : arrondi appliqué à un côté spécifique.
.rounded-circle : rend la bordure complètement circulaire.
.rounded-pill : forme de pilule (demi-cercle).
.rounded-0 : supprime l’arrondi.
.rounded{-type}-1, .rounded{-type}-2, .rounded{-type}-3, etc : ajustent le degré d’arrondi.

` Testez ce bloc de code dans le fichier html précédent.

Complétez ces essais par des paragraphes dotés des différentes tailles d’arrondi et retrouvez les valeurs par défaut.

5.5. Modifier l’épaisseur ou le style

Pour une bordure existante, les classes .border-1, .border-2, .border-3 etc permettent d’ajuster l’épaisseur.

Bootstrap ne propose pas de classes natives pour modifier le style d’une bordure (dotted, dashed, etc.).

` Complétez le fichier html précédent avec des paragraphes dotés de différentes épaisseurs d’arrondis.

5.6. Marges des éléments

Bootstrap propose des classes pour gérer les marges intérieures (padding) et extérieures (margin) tout en assurant un design responsive. Leur syntaxe suit le modèle : .{type de marge}{côté}-{taille} ou .{type de marge}{côté}-{breakpoint}-{taille} pour une adaptation selon l’écran.

Types de marge :
- m pour margin
- p pour padding
Côtés :
- t (top), b (bottom), e (end), s (start)
- x (gauche et droite), y (haut et bas)
- Sans spécifier de côté, la marge s’applique partout
Breakpoints : sm, md, lg, xl, xxl (par défaut xs)
Tailles :
- 0 (aucune marge), 1 (0.25rem), 2 (0.5rem), 3 (1rem), 4 (1.5rem), 5 (3rem)
- auto (centrage automatique pour margin uniquement)

Pour centrer un élément horizontalement, on utilise .mx-auto (margin: 0 auto) sur un élément de type block avec une largeur définie.

` Testez ce bloc de code dans un nouveau fichier html.

Ainsi que ce bloc de code

Testez différentes tailles de marges internes et externes. Dans l'Inspecteur des Outils de développement de Firefox, le volet Modèle de boite affiche les valeurs effectives des éléments sélectionnés dans le code.

6. Bootstrap display

Bootstrap propose un ensemble de classes permettant de modifier la propriété display des éléments HTML.

6.1. Gestion du type d’affichage avec Bootstrap

Les classes de gestion d’affichage sont responsives et suivent cette structure :

.d-{valeur} : applique l’affichage à toutes les tailles d’écran.
.d-{breakpoint}-{valeur} : applique l’affichage à une taille d’écran spécifique (sm, md, lg, xl).

Les valeurs possibles incluent :

none : l’élément est masqué (display: none).
inline, block, inline-block, table, table-cell, table-row, flex, inline-flex en lien avec les valeurs possibles de la propriéte CSS display.

Un élément inline s’affiche en ligne avec d’autres (pourra laisser d’autres éléments se positionner à ses côtés), tandis qu’un élément block occupe toute la largeur disponible. inline-block combine les deux comportements : l’élément est inline (l’outer display est inline) mais contenu de l’élément se comporte comme un block. display: none cache l’élément et réattribue son espace.

Les valeurs table, table-cell, table-row forcent les éléments HTML à se comporter comme des table, tr et td; elles sont très peu courantes en pratique.

Testez ce bloc de code dans un nouveau fichier html.

code d-*

<div class="container mt-2">
    <span class="d-block bg-info mb-3">Un span avec un display:block</span>
    <span class="d-block bg-info mb-3">Un span avec un display:block</span>
    <p class="d-inline bg-info">Un paragraphe avec un display:inline</p>

    <div class="d-table mb-3">
        <div class="d-table-row">
            <div class="d-table-cell bg-warning">Un div se comportant comme une cellule de tableau</div>
            <div class="d-table-cell">Un div se comportant comme une cellule de tableau</div>
        </div>
        <div class="d-table-row">
            <div class="d-table-cell">Un div se comportant comme une cellule de tableau</div>
            <div class="d-table-cell bg-warning">Un div se comportant comme une cellule de tableau</div>
        </div>
    </div>

    <div class="d-flex bg-success mb-3">Je suis flex (block)</div>
    <div class="d-inline-flex bg-success mb-3">Je suis flex (inline)</div>

    <div class="d-none">Je suis caché !</div>

    <div class="d-none d-lg-block">Caché sur petit écran, block à partir de 992px</div>
    <div class="d-md-none d-lg-block">Caché seulement entre 768px et 991px</div>
    <div class="d-block d-md-none">Block jusqu'à 767px, caché ensuite</div>
</div>

Observez le rendu et comparez avec les éléments HTML natifs de type inline (span par ex), block (p par ex) ou table.

6.2. Utilisation du modèle flexbox avec Bootstrap

Bootstrap n’applique pas display: flex par défaut aux éléments HTML, mais propose les classes :

.d-flex : transforme un élément en conteneur flexible (block).
.d-inline-flex : conteneur flexible affiché en inline.

Ces classes sont compatibles avec les breakpoints pour un affichage responsive.

Pour rappel, une synthèse du modèle Flexbox est disponible sur https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties ainsi que de nombreux exemples sur https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-examples.

6.3. Contrôle de la direction des éléments flex

Les classes suivantes définissent l’orientation des éléments flexibles :

.flex-row : disposition horizontale (de gauche à droite).
.flex-row-reverse : disposition inversée (de droite à gauche).
.flex-column : disposition verticale (de haut en bas).
.flex-column-reverse : disposition inversée (de bas en haut).

Ces classes sont responsives via .flex-{breakpoint}-*.

Testez ce bloc de code dans un nouveau fichier html.

code flex-*

<div class="container">
    <div class="d-flex flex-row bg-warning m-2">
        <div class="p-2 border border-dark bg-info">Elément flex 1</div>
        <div class="p-2 border border-dark bg-info">Elément flex 2</div>
        <div class="p-2 border border-dark bg-info">Elément flex 3</div>
    </div>
    <div class="d-flex flex-row-reverse bg-warning m-2">
        <div class="p-2 border border-dark bg-info">Elément flex 1</div>
        <div class="p-2 border border-dark bg-info">Elément flex 2</div>
        <div class="p-2 border border-dark bg-info">Elément flex 3</div>
    </div>
    <div class="d-flex flex-column bg-warning m-2">
        <div class="p-2 border border-dark bg-info">Elément flex 1</div>
        <div class="p-2 border border-dark bg-info">Elément flex 2</div>
        <div class="p-2 border border-dark bg-info">Elément flex 3</div>
    </div>
    <div class="d-flex flex-column-reverse bg-warning m-2">
        <div class="p-2 border border-dark bg-info">Elément flex 1</div>
        <div class="p-2 border border-dark bg-info">Elément flex 2</div>
        <div class="p-2 border border-dark bg-info">Elément flex 3</div>
    </div>
    <div class="d-flex flex-column flex-lg-row bg-warning m-2">
        <div class="p-2 border border-dark bg-info">Elément flex 1</div>
        <div class="p-2 border border-dark bg-info">Elément flex 2</div>
        <div class="p-2 border border-dark bg-info">Elément flex 3</div>
    </div>
</div>

6.4. Alignement des éléments flex

6.4.1. Sur l’axe principal (`justify-content-*`) :

Les classes Bootstrap .justify-content-* permettent d’ajuster l’alignement des éléments flex sur leur axe principal, qui est horizontal par défaut, mais peut être vertical si le conteneur utilise la propriété flex-direction: column.

.justify-content-start : éléments alignés au début du conteneur.
.justify-content-end : alignés à la fin.
.justify-content-center : centrés.
.justify-content-between : répartis équitablement avec un espace entre le premier et le dernier élément.
.justify-content-around : espacés uniformément.

Testez ce bloc de code dans un nouveau fichier html.

code justify-content-*

<div class="container">
    <!--Par défaut, la direction est flex row-->
    <div class="d-flex justify-content-start bg-warning m-2">
        <div class="p-2 border border-dark bg-info">Elément flex 1</div>
        <div class="p-2 border border-dark bg-info">Elément flex 2</div>
        <div class="p-2 border border-dark bg-info">Elément flex 3</div>
    </div>
    <div class="d-flex justify-content-center bg-warning m-2">
        <div class="p-2 border border-dark bg-info">Elément flex 1</div>
        <div class="p-2 border border-dark bg-info">Elément flex 2</div>
        <div class="p-2 border border-dark bg-info">Elément flex 3</div>
    </div>
    <div class="d-flex justify-content-end bg-warning m-2">
        <div class="p-2 border border-dark bg-info">Elément flex 1</div>
        <div class="p-2 border border-dark bg-info">Elément flex 2</div>
        <div class="p-2 border border-dark bg-info">Elément flex 3</div>
    </div>
    <div class="d-flex justify-content-between bg-warning m-2">
        <div class="p-2 border border-dark bg-info">Elément flex 1</div>
        <div class="p-2 border border-dark bg-info">Elément flex 2</div>
        <div class="p-2 border border-dark bg-info">Elément flex 3</div>
    </div>
    <div class="d-flex justify-content-around bg-warning m-2">
        <div class="p-2 border border-dark bg-info">Elément flex 1</div>
        <div class="p-2 border border-dark bg-info">Elément flex 2</div>
        <div class="p-2 border border-dark bg-info">Elément flex 3</div>
    </div>
    <!--justify-content-center pour les petits écrans puis justify-content-between dès qu'on passe le breakpoint lg-->
    <div class="d-flex justify-content-center justify-content-lg-between bg-warning m-2">
        <div class="p-2 border border-dark bg-info">Elément flex 1</div>
        <div class="p-2 border border-dark bg-info">Elément flex 2</div>
        <div class="p-2 border border-dark bg-info">Elément flex 3</div>
    </div>

    <!--Eléments centrés selon l'axe principal qui est ici vertical-->
    <div class="d-flex flex-column justify-content-center bg-warning m-2" style="min-height:200px;">
        <div class="p-2 border border-dark bg-info">Elément flex 1</div>
        <div class="p-2 border border-dark bg-info">Elément flex 2</div>
        <div class="p-2 border border-dark bg-info">Elément flex 3</div>
    </div>
</div>

6.4.2. Sur l’axe secondaire :

L’axe secondaire correspond à l’axe opposé à l’axe principal. Ainsi, si l’axe principal des éléments flex est horizontal, l’axe secondaire sera vertical, et inversement.

Il existe plusieurs méthodes pour aligner les éléments flex le long de cet axe :

align-items pour aligner tous les éléments d’une ligne simultanément.
align-self pour un alignement spécifique à chaque élément.
align-content afin d’aligner plusieurs lignes les unes par rapport aux autres.

Alignement simultanés (`align-items-*`) :

On utilise ici :

.align-items-start : alignés en haut.
.align-items-end : alignés en bas.
.align-items-center : centrés.
.align-items-baseline : alignés sur la ligne de base. Cet alignement est identique à start si les élements ont tous la même hauteur.

.align-items-stretch : étirés pour remplir l’espace disponible.

Testez ce bloc de code dans un nouveau fichier html.

code align-items-*

<div class="container">
    <div class="d-flex align-items-start bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex align-items-end bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex align-items-center bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex align-items-baseline bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex align-items-stretch bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>

    <div class="d-flex flex-column align-items-start bg-warning my-2">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex flex-column align-items-end bg-warning my-2">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex flex-column align-items-center bg-warning my-2">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex flex-column align-items-baseline bg-warning my-2">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex flex-column align-items-stretch bg-warning my-2">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
</div>

Observez ici les alignements sur les deux directions.

Alignement individuel (`align-self-*`) :

Permet d’ajuster l’alignement d’un élément spécifique avec les mêmes valeurs que align-items-*. On a donc :

.align-self-start : aligné en haut.
.align-self-end : aligné en bas.
.align-self-center : centré.
.align-self-baseline : aligné sur la ligne de base.
.align-self-stretch : étiré pour remplir l’espace disponible.

Testez ce bloc de code dans un nouveau fichier html.

code align-self-*

<div class="container">
    <div class="d-flex bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border align-self-start">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border align-self-end">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border align-self-center">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border align-self-baseline">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border align-self-stretch">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>

    <div class="d-flex flex-column bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border align-self-start">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex flex-column bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border align-self-end">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex flex-column bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border align-self-center">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex flex-column bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border align-self-baseline">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
    <div class="d-flex flex-column bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border align-self-stretch">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>

    <div class="d-flex bg-warning my-2" style="min-height:5rem">
        <div class="p-2 bg-info border">Flex élément 1</div>
        <div class="p-2 bg-info border align-self-start align-self-md-end">Flex élément 2</div>
        <div class="p-2 bg-info border">Flex élément 3</div>
    </div>
</div>

Alignement des lignes conjointes (`align-content-*`) :

Les classes Bootstrap .align-content-* servent à ajuster l’alignement des éléments flex répartis sur plusieurs lignes le long de leur axe secondaire. Elles permettent d’organiser l’espace entre les lignes d’éléments flex dans un conteneur.

Il ne faut pas confondre .align-items- et .align-content- : la première agit sur l’alignement des éléments d’une seule ligne, tandis que la seconde ajuste l’alignement des lignes entre elles. De plus, .align-content-* n’a aucun effet si tous les éléments sont positionnés sur une seule ligne.

On utilise ici :

align-content-start : Cette valeur par défaut aligne les lignes d’éléments flex au début du conteneur sur l’axe secondaire.
.align-content-end : Les lignes d’éléments flex sont regroupées vers la fin du conteneur selon l’axe secondaire.
.align-content-center : Les lignes d’éléments flex sont positionnées au centre du conteneur en suivant l’axe secondaire.
.align-content-between : Les lignes sont réparties de manière égale dans le conteneur. La première ligne est placée au début et la dernière à la fin du conteneur, toujours en fonction de l’axe secondaire.
.align-content-around : Les lignes sont réparties uniformément avec un espace autour de chaque groupe d’éléments flex sur l’axe secondaire.
.align-content-stretch : Chaque ligne d’éléments flex s’étire pour occuper tout l’espace disponible dans le conteneur sur l’axe secondaire.

Testez ce bloc de code dans un nouveau fichier html.

code align-content-*

<div class="container">
    <p>align-content-start</p>
    <div class="d-flex bg-warning my-2 align-content-start flex-wrap" style="min-height:10rem">
        <div class="p-2 bg-info border" style="width:45%">Flex élément 1</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 2</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 3</div>
    </div>
    <p>align-content-end</p>
    <div class="d-flex bg-warning my-2 align-content-end flex-wrap" style="min-height:10rem">
        <div class="p-2 bg-info border" style="width:45%">Flex élément 1</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 2</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 3</div>
    </div>
    <p>align-content-center</p>
    <div class="d-flex bg-warning my-2 align-content-center flex-wrap" style="min-height:10rem">
        <div class="p-2 bg-info border" style="width:45%">Flex élément 1</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 2</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 3</div>
    </div>
    <p>align-content-between</p>
    <div class="d-flex bg-warning my-2 align-content-between flex-wrap" style="min-height:10rem">
        <div class="p-2 bg-info border" style="width:45%">Flex élément 1</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 2</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 3</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 4</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 5</div>
    </div>
    <p>align-content-around </p>
    <div class="d-flex bg-warning my-2 align-content-around flex-wrap" style="min-height:10rem">
        <div class="p-2 bg-info border" style="width:45%">Flex élément 1</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 2</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 3</div>
    </div>
    <p>align-self-stretch</p>
    <div class="d-flex bg-warning my-2 align-self-stretch flex-wrap" style="min-height:10rem">
        <div class="p-2 bg-info border" style="width:45%">Flex élément 1</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 2</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 3</div>
    </div>
    <p>align-content-center et flex-wrap</p>
    <div class="d-flex flex-column bg-warning my-2 align-content-center flex-wrap" style="min-height:10rem">
        <div class="p-2 bg-info border" style="width:45%">Flex élément 1</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 2</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 3</div>
    </div>
    <p>align-content-start, align-content-md-end et flex-wrap</p>
    <div class="d-flex bg-warning my-2 align-content-start align-content-md-end flex-wrap" style="min-height:10rem">
        <div class="p-2 bg-info border" style="width:45%">Flex élément 1</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 2</div>
        <div class="p-2 bg-info border" style="width:45%">Flex élément 3</div>
    </div>
</div>

Observez qu’on attribue une hauteur suffisamment grande aux éléments flex afin que l’ensemble s’étende sur plusieurs lignes. On utilise également la classe Bootstrap .flex-wrap pour forcer les éléments dépassant du conteneur à passer à la ligne suivante. Cette configuration est essentielle pour illustrer l’effet des différentes valeurs de align-content-.

6.5. Gestion de l’espace disponible

Pour la gestion de l’espace disponible on utilise :

.flex-fill : chaque élément flex occupe l’espace disponible de manière équitable.
.flex-grow-0 / .flex-grow-1 : contrôle la capacité d’un élément à grandir pour remplir l’espace libre.
.flex-shrink-0 / .flex-shrink-1 : définit si un élément peut rétrécir.

code flex-{fill|grow|shrink}

<div class="container">
    <div class="d-flex my-2 bg-warning">
        <div class="p-2 bg-info border">Elément flex 1</div>
        <div class="p-2 bg-info border">Elément flex 2</div>
        <div class="p-2 bg-info border">Elément flex 3</div>
    </div>

    <div class="d-flex my-2 bg-warning">
        <div class="p-2 flex-fill bg-info border">Elément flex-fill 1</div>
        <div class="p-2 flex-fill bg-info border">Elément flex-fill 2</div>
        <div class="p-2 flex-fill bg-info border">Elément flex-fill 3</div>
    </div>

    <div class="d-flex my-2 bg-warning">
        <div class="p-2 flex-grow-1 bg-info border">flex-grow-1</div>
        <div class="p-2 bg-info border">Elément flex 2</div>
        <div class="p-2 bg-info border">Elément flex 3</div>
    </div>

    <div class="d-flex my-2 bg-warning">
        <div class="p-2 w-100 bg-info border">Elément flex w-100</div>
        <div class="p-2 bg-info border">Elément flex 2</div>
        <div class="p-2 bg-info border">Elément flex 3</div>
    </div>

    <div class="d-flex my-2 bg-warning">
        <div class="p-2 w-100 bg-info border">Elément flex w-100</div>
        <div class="p-2 bg-info border">Elément flex 2</div>
        <div class="p-2 flex-shrink-0 bg-info border">flex-shrink-0</div>
    </div>
</div>

6.6. Modification de l’ordre d’affichage

L’ordre des éléments flex peut être ajusté avec .order-*, où un chiffre indique leur position dans l’affichage (.order-0, .order-1, etc.).

` Testez ce bloc de code dans un nouveau fichier html.

6.7. Gestion du retour à la ligne

Avec les classes :

.flex-nowrap : les éléments restent sur une seule ligne.
.flex-wrap : les éléments peuvent passer à la ligne.
.flex-wrap-reverse : même principe, mais avec inversion des lignes.

` Testez ce bloc de code dans un nouveau fichier html.

Bootstrap offre donc une grande flexibilité pour structurer l’affichage et l’organisation des éléments avec ses classes flexbox.

7. Positionnement des éléments

Bootstrap offre la possibilité d’appliquer différentes valeurs à la propriété position à l’aide des classes suivantes :

.position-static
.position-relative
.position-absolute
.position-fixed
.position-sticky

Par défaut, les éléments sont positionnés avec position: static. Ce type de positionnement les intègre normalement dans le flux de la page, empêchant ainsi toute modification de leur position à l’aide des propriétés top, right, left et bottom.

Un élément défini avec position: relative est positionné en fonction de son emplacement initial. Il peut être déplacé par rapport à cette position de départ à l’aide des propriétés top, right, left et bottom.

Lorsqu’un élément est positionné avec position: absolute ou position: fixed, il est retiré du flux normal de la page, ce qui signifie qu’aucun espace n’est réservé pour lui. Sa position est alors contrôlée à l’aide des mêmes propriétés (top, right, left, bottom).

position: absolute : l’élément est positionné par rapport à son ancêtre le plus proche qui possède une position autre que static. Si aucun ancêtre positionné n’est trouvé, il est positionné par rapport au viewport.
position: fixed : l’élément est toujours positionné par rapport au viewport, peu importe son contexte dans le document.

Avec position: sticky, l’élément suit le flux normal de la page mais devient fixé lorsqu’il atteint une certaine position définie par top, right, left ou bottom. Il reste alors attaché à son ancêtre de défilement le plus proche ou à son conteneur englobant.

` Testez ce bloc de code dans un nouveau fichier html.

Observez le positionnement des différents blocs en leur ajoutant une couleur de fond, en modifiant les styles de chacun ou en changeant leur ordre.

7.1. Classes supplémentaires pour fixer des éléments

Les classes liées à position ne sont pas responsives et peuvent interagir avec display, il est donc important d’en tenir compte lors de leur utilisation.

Pour fixer un élément en haut ou en bas de la fenêtre, Bootstrap propose : - .fixed-top : fixe l’élément en haut de la fenêtre. - .fixed-bottom : fixe l’élément en bas de la fenêtre.

` Testez ce bloc de code dans un nouveau fichier html.

Enfin, la classe .sticky-top permet de fixer un élément contre le bord supérieur uniquement après qu’il ait été dépassé lors du défilement. Cette fonctionnalité est particulièrement utile pour les longues pages avec une barre de défilement, offrant ainsi des effets intéressants d’ancrage dynamique.

` Testez ce bloc de code dans un nouveau fichier html.

8. Visibilité et dépassements

Bootstrap propose des classes pour gérer la visibilité et le dépassement du contenu.

Visibilité :
.visible : affiche l’élément.
.invisible : le masque sans modifier la mise en page (contrairement à display: none).
Dépassement (overflow) :
.overflow-auto : laisse le navigateur gérer le dépassement (avec une barre de défilement généralement)
.overflow-hidden : coupe le contenu excédentaire.

Ces classes ne sont pas responsives et s’appliquent uniformément sur tous les écrans.

Testez ce bloc de code dans un nouveau fichier html.

code visible|overflow

<div class="container">
    <div class="d-none">display: none</div>
    <div>Ce texte s'affiche normalement</div>
    <div class="invisible">Ce texte est invisible</div>
    <div class="visible">Ce texte est visible</div>
</div>
<div class="container">
    <div class="d-flex">
        <div class="overflow-auto bg-light p-2 mr-3" style="width: 150px; height: 100px">Le navigateur décide de la
            façon
            dont le texte qui dépasse doit être géré. Généralement, une barre de défilement sera affichée
        </div>
        <div class="overflow-hidden bg-light p-2" style="width: 150px; height: 100px">On décide de cacher le texte qui
            dépasse en le tronquant. Le texte de cette phrase devrait être à moitié coupé
        </div>
    </div>
</div>

9. Ombres

Les classes .shadow-* de Bootstrap ajoutent des ombres aux éléments :

.shadow-none : aucune ombre
.shadow-sm : petite ombre
.shadow : ombre moyenne
.shadow-lg : ombre large

Les ombres sont grises, sans option de couleur personnalisable.

` Testez ce bloc de code dans un nouveau fichier html.