Styliser les images à l’aide de Bootstrap4

De nos jours il est très important de faire recourt aux images pour capter l’attention des internautes et faire véhiculer un message sur une page web. Pour ce faire il faut que l’image soit responsive, c’est-à-dire qu’elle se redimensionne en fonction de la taille de la fenêtre du navigateur, et appliquer aussi quelques effets intéressant à vos images .

Nous verrons ici comment grâce Bootstrap4, rendre son image responsive et ajouter des styles à son image.

Rendre une image responsive :

Bootstrap4 met à notre disposition la classe .img-fluid pour définir une image responsive.

Exemple :

<img class="img-fluid" src="working.jpg" alt="texte alternatif">

Appliquer un effet de caption à une image :

Cet effet est très intéressant pour rendre attrayante une gallérie photo, il faut utiliser la classe .img-thumbnail pour réaliser cet effet.

Exemple :

<img class="img-fluid img-thumbnail" src="working.jpg" alt="des designers">

Rendu :

effet de caption sur image

Appliquer des bords arrondis à une image :

La classe permettant d’arrondir les bords de votre image est la classe .rounded.

Exemple :

<img class="img-fluid rounded" src="working.jpg" alt="des designers">

Rendu :

Bords arrondi sur une imagee

Dessiner un rond autour d’une image :

Il faut utiliser la classe .rounded-circle pour appliquer cet effet mais il faut que l’image à laquelle vous souhaitez appliquer cet effet soit carrée, car cette classe arrondi l’image en hauteur et en largeur et si l’image n’est pas carrée l’image aura après application de l’effet une forme ovale.

Exemple :  Si l’image n’est pas au préalable carrée

<img class="img-fluid rounded" src="working.jpg" alt="des designers">

Rendu :

résultat d'un cercle autour d'une image non carrée

Exemple :  Si l’image est au préalable carrée

<img class="img-fluid rounded" src="profil.jpg" alt="Mon profil">

Rendu :

résultat d'un cercle autour d'une image carrée

 

Voir la table des matières

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.