Badges et jumbotron Bootstrap

Les badges et le jumbotron sont deux composants visuels qui vont nous permettre d’attirer l’attention sur certains contenus particuliers en les faisant ressortir par rapport au reste de la page.

 

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.

Laisser un commentaire