Bootstrap est truffés de classes utilitaires permettant de simplifier/accélérer le développement. Afin de vous familiariser avec ce concept, nous allons examiner quelques-unes d'entre elles.

Image responsive

Comme son nom le laisse sous-entendre, la classe .img-fluid sert à rendre une image fluid/responsive en lui appliquant les propriétés CSS suivantes:

max-width: 100%;
height: auto;

La propriété max-width fait en sorte que l'image affichera selon sa taille normale, à moins que l'espace soit insuffisant. Dans ce cas, elle sera limitée à la largeur disponible. De son côté, height: auto; s'assure que l'image ne soit jamais déformée.

Pour activer cette classe, il suffit de l'ajouter à une image ainsi:

<img src="image.jpg" class="img-fluid">

Alignements de texte

Pour aligner un texte à gauche, au centre ou à droite, il est possible d'utiliser les classes utilitaires suivantes:

  • text-start à gauche

  • text-center au centre

  • text-end à droite

Toutes ces options d'alignements sont compatibles avec l'ajout d'un breakpoint afin d'indiquer quand leur comportement devrait devenir actif.

Par exemple, pour centrer un texte lorsque le breakpoint lg est atteint, il serait possible de faire:

<p class="text-lg-center">Texte centré en lg</p>

Display

Pour donner une valeur de display particulière à un élément, il est possible d'utiliser les classes utilitaires suivantes:

  • d-block pour display block.

  • d-inline pour display inline.

  • d-inline-block pour display inline-block.

  • d-flex pour display flex.

  • d-none pour display none.

  • etc.

Toutes ces options de display sont compatibles avec l'ajout d'un breakpoint afin d'indiquer le moment où l'affichage un affichage devrait changer.

Par exemple, pour qu'un élément soit invisible par défaut, mais devienne en display: block lorsque le breakpoint lg est atteint, il serait possible de faire:

<div class="d-none d-lg-block">...</div>