Les images en Bootstrap

Présentation

• Bootstrap va nous permettre de centrer des images, d’ajouter des cadres de différentes formes ou encore de faire en sorte que la taille de nos images s'adapte en fonction de celle de leur élément parent.
• Les classes d'images Bootstrap 3 ont été changé dans la version Bootstrap4

Renommé .img-responsive en .img-fluid. Renommé .img-rounded en .rounded. Renommé .img-circle en .rounded-circle.

Les classes utilisées

• .rounded

  • Cette classe nous permettre de rogner les images de façon à ce que sa forme soit légèrement arrondie
  • <img src="images/01.jpg" class="rounded" alt="Oasis tunisienne">

• .rounded-circle

  • Cette classe nous permettre de transformer les images de façon à ce que sa forme soit un ellipse
  • <img src="images/01.jpg" class="rounded-circle" alt="Oasis tunisienne">

• .img-thumbnail

  • Cette classe nous permettre d'ajouter une bordure arrondie de 1px. visible aux images .
  • <img src="images/01.jpg" class="img-thumbnail" alt="Oasis tunisienne">

  • Application

    • Utiliser les classes media, media-body et img-thumbnail pour reproduire le schéma suivant:

    

    Afficher la solution

• .img-fluid

  • Cette classe nous permettre de créer des images réactives. L'image sera alors bien adaptée à l'élément parent.
  • <img src="images/01.jpg" class="img-fluid" alt="Oasis tunisienne">
  • La classe.img-fluid s'applique max-width: 100%;et height: auto;à l'image.

Alignement des images

1. Les classes .float-left et .float-right.

   • Cette classe nous permettre de flotter une image à gauche ou à droite.
   • <img src="images/01.jpg" class="img-thumbnail float-right" alt="Oasis tunisienne">

   Faites attention à l'impact de la propriété float sur le design général de vos pages.

2. La classe .text-center.

   • La classe .text-center nous permettre de centrer l'image sur son parent

3. La classe .d-block.

   • La classe .d-block(pour "display : block") nous permettre de changer le type d’affichage de notre image et lui appliquer une marge auto avec la classe .mx-auto.
   • <img src="images/01.jpg" class="img-thumbnail d-block mx-auto" alt="Oasis tunisienne">