Les badges
On va utiliser les badges pour ajouter une information précise à un certain contenu. Les badges vont notamment être utilisés pour ajouter un label ou un compteur à un élément.
Pour créer un badge avec Bootstrap, nous allons utiliser la classe .badge qu’on va ajouter à un élément inline comme un span.
On va généralement également ajouter une deuxième classe .badge-{primary|success…} pour définir la couleur de fond du badge.
Notez que les badges vont être automatiquement redimensionnées pour correspondre à la taille de l’élément parent direct.
Si le contexte du badge n’est pas parfaitement clair, on ajoutera un texte pour les liseuses d’écran avec la classe .sr-only afin qu’elles puissent les interpréter correctement.
Pour obtenir des badges arrondis, on pourra également utiliser une classe .badge-pill en plus de la classe .badge.
See the Pen
Bootstrap 6.1.1 by Pierre (@pierregiraud)
on CodePen.
Le jumbotron
Le jumbotron est une boite rectangulaire qui va permettre de mettre en avant un certain message (marketing par exemple).
Pour définir un jumbotron, on va ajouter une classe .jumbotron à un élément conteneur de type div. On va ensuite pouvoir placer plus ou moins n’importe quel contenu HTML à l’intérieur.
Si on souhaite que notre jumbotron occupe tout l’espace, on pourra également utiliser la classe .jumbotron-fluid en plus de la classe .jumbotron.
See the Pen
Bootstrap 6.1.2 by Pierre (@pierregiraud)
on CodePen.
