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.
