Bootstrap 5 : Gérer les images

Bootstrap 5 gerer les images

Nous allons voir dans cette leçon les différentes classes offertes par Bootstrap 5 pour bien gérer les images.

Table des matieres

Les classes Bootstrap pour les images :

  • rounded
  • rounded-circle
  • img-thumbnail
  • img-fluid
  • float-start
  • float-end 
  • d-block
  • mx-auto

Comment intégrer une image avec Bootstrap 5

L’intégration d’une image avec Bootstrap 5 se fait de la même manière qu’avec du HTML classique. On utilise l’élément <img> avec les attributs src=”* et alt=”*.

 <img src=”https://media.tacdn.com/media/attractions-splice-spp-674×446/09/de/57/cb.jpg alt=”new-york“>

Exemple :

Comment intégrer une image avec Bootstrap 5
Comment intégrer une image avec Bootstrap 5

Changer la taille d’une image

Là aussi pas de différence avec le HTML classique, vous pouvez utiliser au choix :

Les attributs width et height :

<img src=”https://media.tacdn.com/media/attractions-splice-spp-674×446/09/de/57/cb.jpg” alt=”new-york” width=”328” height=”168>

L’attribut style :

<img src=”https://media.tacdn.com/media/attractions-splice-spp-674×446/09/de/57/cb.jpg” alt=”new-york” style=”width:328px;height:168px“>

Changer la taille d’une image

Changer la forme d’une image avec Bootstrap 5

3 classes sont disponibles pour changer la forme d’une image avec Bootstrap 5.

  • La classe rounded va arrondir les 4 coins de l’image.
  • La classe rounded-circle va transformer l’image en une
  • La classe img-thumbnail va ajouter une bordure de 1px à l’image.
Changer la forme d’une image avec Bootstrap 5
Changer la forme d’une image avec Bootstrap 5

Créer des images responsives

Pour créer des images qui s’adaptent à la taille d’écran de vos lecteurs, nous allons utiliser la classe img-fluid.

La classe img-fluid a pour style css max-width:100% et height: auto.

Bootstrap Créer des images responsives

Aligner les images avec Bootstrap 5

Bootstrap 5 a créé des classes spécifiques pour centrer ou aligner à droite ou à gauche les images.

  • float-start : Pour aligner les images à gauche (positionnement par défaut).
  • float-end : Pour aligner les images à droite.
Aligner les images avec Bootstrap 5
Aligner les images avec Bootstrap 5

Pour centrer les images, nous avons plusieurs possibilités.

  • La première et d’appliquer à l’élément parent la classe text-center.

<div class=”col text-center”>

     <img src=”https://media.tacdn.com/media/attractions-splice-spp-674×446/09/de/57/cb.jpg” alt=”new-york” style=”width:200px;height:100px” class=”rounded img-fluid”>

La seconde manière de faire et de transformer notre image en élément de style “block avec la classe d-block et ajouter les marges automatiques avec la classe mx-auto.

centrer les images avec Bootstrap 5

Vous pouvez voir un autre exemple de transformation d’élément inline en élément block dans la leçon :  créer des boutons avec Bootstrap 5 au chapitre Placer des groupes de boutons côte à côte.

Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0