Bootstrap 4 : Images

Bootstrap 4 dispose de class pour jouer sur la forme des images mais aussi leur adaptabilité en fonction de l'écran. 

Pour rendre une image extensible et qu'elle s'adapte à son élément parent, nous allons utiliser la class .img-fluid. 

<img class="img-fluid" src="chemin_de_l_image" alt="Image fluide" />

Cette class (.img-fluid) applique une largeur maximale de 100% et une hauteur automatique (max-width : 100%; height : auto).

La class rounded : cette class arrondit légèrement les bordures de l'image

<img class="rounded" src="chemin_de_l_image" alt="Image" />

La class rounded-circle : Cette class arrondit l'image jusqu'à former un cercle

<img class="rounded-circle" src="chemin_de_l_image" alt="Image" />

La class .img-thumbnail : Cette class applique une sorte de bordure afin de rendre l'image comme une vignette

<img class="img-thumbnail" src="chemin_de_l_image" alt="Image" />

Les class .float-left et .float-right permettent respectivement d'aligner les images à l'extrémité gauche et à l'extrémité droite :

<img class="float-left" src="chemin_de_l_image" alt="Image" />
<img class="float-right" src="chemin_de_l_image" alt="Image" />

 

Les class .mx-auto et .d-block permettent de centrer une image :

<img class="mx-auto d-block" src="chemin_de_l_image" alt="Image" />

comments powered by Disqus