Les images dans Bootstrap
Les images dans Bootstrap 4
-
Objectifs
- Etre capable de travailler avec les images dans Bootstrap
-
Présentation
- Bootstrap fournit des classes pouvant être utilisées lors de l’utilisation de l’élément <img>.
- Les images ont généralement une expansion naturelle. Sur de grands écrans, cela n’est pas critique, cependant montrés sur de petits appareils, ils peuvent quitter la zone de visualisation. Avec
.img-fluid, vous pouvez présenter de meilleures images. -
Images responsives
- Les images dans Bootstrap sont réactives avec
.img-fluidsont appliqués à l’image pour qu’elle soit redimensionnée avec l’élément parent. Cela garantit que l’image est adaptée à l’élément parent. - Cette classe applique trois actions:
max-width: 100%height: Autodisplay: Block-
Coins arrondis et Thumbnails
- Vous pouvez utiliser Bootstrap pour rendre des images avec des coins arrondis ou un cercle.
- Ceci est réalisé avec les classes
.rounded-*d’utilitaires. - Les classes d’utilitaires peuvent être appliquées à n’importe quel élément (pas seulement aux images).
- La classe :
.roundedcorrespondand aux styles css : - Les classes de rayon de bordure sont:
roundedrounded-top:Arrondir le hautrounded-right:Arrondir le haut du côté droitrounded-bottom:Arrondir le haut et le basrounded-left:Arrondir le haut du côté gaucherounded-circle:border-radius: 50%;rounded-0- Prenons une image, arrondissons ses angles avec la classe
.roundedet voyons le résultat. - Ce qui nous donne:
-
Alignement des images
-
Alignement vertical des images
- Modifier facilement l’alignement vertical des éléments de cellule en ligne, bloc en ligne, tableau en ligne et tableau.
- Alignement des images à gauche ou à droite
- Si vous désirez un positionnement différent en fonction des résolutions d’écran vous pouvez bien rajouter les classes responsives comme ceci :
-
Alignement horizontal des images
- Centrer verticalement en utilisant des marges automatiques
my-auto: représente les marges sur l’axe des y vertical et équivaut à:- Centrer verticalement en utilisant Flexbox
- Centrer verticalement à l’aide des utilitaires d’affichage
.rounded {
border-radius: 0.25rem;
}<div class="container">
<div class="row">
<div class="col">
</br>
<img src="image.png" alt="..." class="rounded mb-0">
<img src="image.png" alt="..." class="rounded-top">
<img src="image.png" alt="..." class="rounded-right">
<img src="image.png" alt="..." class="rounded-bottom">
<img src="image.png" alt="..." class="rounded-left">
<img src="image.png" alt="..." class="rounded-circle">
<img src="image.png" alt="..." class="rounded-pill">
<img src="image.png" alt="..." class="rounded-0">
</div>
</div>
</div>
Classe : .float-right alignement à droite.
Classe : .float-left alignement à gauche.
<div class="container">
<div class="row">
<div class="col">
</br>
<img class="float-right" src="image.png" alt="...">
<img class="float-left" src="image.png" alt="...">
</div>
</div>
</div>.float-left,.float-right,.float-none,.float-sm-left,.float-sm-right,.float-sm-none,.float-md-left,.float-md-right,.float-md-none,.float-lg-left,.float-lg-right,.float-lg-none,.float-xl-left,.float-xl-right,.float-xl-none
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div> margin-top: auto; et margin-bottom: auto;
