Le système de flexbox

Bootstrap implémente le flexbox dans plusieurs éléments par défaut.

Exemple :

Lorsqu'on crée une grille, la classe row est un flexbox par défaut pour faciliter la réactivité.

Appliquer le flex

Pour appliquer les capacités du flex dans notre HTML à partir de Bootstrap:

1. Rendre l'élément parent flexible

   <div class="d-flex">
       ...
   </div>
   

2. Ajouter la direction du flex au besoin

   <div class="d-flex flex-column">
       ...
   </div>
   

3. Utiliser justify-content et/ou align-items au besoin

   <div class="d-flex flex-column justify-content-center align-items-center">
       ...
   </div>
   

4. Au besoin sur les enfants, utiliser align-self et/ou les marges

   <div class="container d-flex flex-column justify-content-center align-items-center">
       <p class="align-self-start ms-auto">
           Un paragraphe
       </p>
   </div>
   

Exemple : superposition sur une carte

On utilise beaucoup les cartes pour avoir un bloc avec image qu'on place sous du contenu.

On appele cela les "card overlay" (superposition sur carte).

En gros :

1. la carte possède une image qui détermine la taille de la carte (ce n'est pas une image de fond, mais bien du contenu dans la carte)
2. on ajoute une division dans la carte qui contient du contenu à afficher par-dessus l'image
3. on utilise le flex pour positionner sur l'image

Exemple :

HTML

<div class="card">
    <img class="card-img" src="img/imageCarte.jpg" alt="image de microsoft" >
    <div class="card-img-overlay d-flex flex-column justify-content-center">
        <div>
            <span class="px-2 fw-bold">Nouveau</span>
            <h3 class="fw-bolder">Surface Pro, Copilot+ PC</h3>
            <p>Donnez vie à des idées brillantes grâce à une flexibilité de nouvelle génération et une vitesse optimisée par l'IA.</p>
        </div>
    </div>
</div>