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
à gauchetext-center
au centretext-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>