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 :

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 :

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 : Exemple :  Si l’image est au préalable carrée

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

Rendu : Voir la table des matières J’envoie régulièrement des astuces et techniques peu connus sur le développement web à un groupe privé de personnes… Je leur envoie des contenus gratuits, des tutoriels sur Bootstrap et ils bénéficient aussi de mes propres créations (thèmes premiums, composants et éléments d’interface). Ils sont aussi mis au courant dès que les thèmes premiums et plugins premiums sont au tarif promotionnel sur les meilleures marketplaces. Une fois inscrit, tu reçois gratuitement  mon livre Prise en main de Bootstrap 4 et un thème premium. Clique ici pour rejoindre le groupe privé et bénéficier de tous ces avantages.