Gérer les images et les figures avec Bootstrap

Bootstrap va nous permettre de centrer des images, d’ajouter des cadres de différentes formes ou encore de de faire en sorte que la taille de nos images s’adapte en fonction de celle de leur élément parent.

 

Créer des cadres de formes différentes autour des images

Les classes .rounded et .rounded-circle vont nous permettre respectivement de rogner notre image de façon à ce que sa forme soit légèrement arrondie ou de la transformer en une ellipse tandis que la classe .img-thumbnail va ajouter une bordure visible à une image.

See the Pen
Bootstrap 3.2.1
by Pierre (@pierregiraud)
on CodePen.

 

Aligner ou centrer une image

Nous allons pouvoir faire flotter une image à gauche ou à droite avec les classes .float-left et .float-right.

See the Pen
Bootstrap 3.2.2
by Pierre (@pierregiraud)
on CodePen.

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

Pour centrer une image, on va avoir deux solutions possibles. On va déjà pouvoir créer un élément conteneur et utiliser la classe .text-center. On va également pouvoir changer le type d’affichage de notre image avec la classe .d-block (pour « display : block ») et lui appliquer une marge auto avec la classe .mx-auto.

See the Pen
Bootstrap 3.2.3
by Pierre (@pierregiraud)
on CodePen.

 

Adapter la taille des images à la taille de l’écran de vos visiteurs

Nous allons pouvoir faire en sorte que nos images soient responsives en leur appliquant la classe .img-fluid.

Cette classe va appliquer les styles CSS max-width : 100% et height : auto à nos images.

See the Pen
Bootstrap 3.2.4
by Pierre (@pierregiraud)
on CodePen.

 

Figure et figcaption

Bootstrap nous fournit également trois classes pour gérer l’apparence des éléments à l’intérieur d’éléments HTML figure et figcaption.

Ces classes sont les suivantes :

  • .figure ;
  • .figure-img ;
  • .figure-caption.

Notez que les images incluses dans les éléments figure n’ont pas de taille prédéfinie. Il faudra donc ajouter ne classe .img-fluid à une image dans cet élément si vous voulez que celle-ci soit responsive.

See the Pen
Bootstrap 3.2.5
by Pierre (@pierregiraud)
on CodePen.

Laisser un commentaire

© Pierre Giraud - Toute reproduction interdite - Mentions légales