Classes d'image en bootstrap 5 | Expliqué
Façon d'images en bootstrap 5
Dans le but de styliser vos images en leur fournissant une certaine forme, il existe plusieurs classes disponibles dans Bootstrap 5. Ces classes ainsi que leurs démonstrations ont été discutées dans cette section.
.arrondi
Afin de contourner les coins de l'image, utilisez le .arrondi classe. Pour ce faire, il vous suffit d'inclure cette classe dans la balise.
Html
Nous savons que Bootstrap fonctionne avec des éléments d'emballage à l'intérieur d'un conteneur, nous avons donc créé un conteneur div dans le code ci-dessus et imbriqué une image à l'intérieur. L'image a été attribuée à la classe arrondie avec une certaine largeur et hauteur.
Sortir
La sortie ci-dessus montre une image avec des coins arrondis.
.cercle arrondi
Comme son nom l'indique, la classe en discussion dans cette section fait une image un cercle. Ci-dessous, nous avons montré sa démonstration.
Html
Afin de faire de l'image un cercle, nous avons attribué la classe de cercle arrondi à l'image.
Sortir
L'image a été transformée en cercle avec succès.
.IMG-Thumbnail
Les miniatures jouent un rôle vital lors de la conception d'un site Web qui affiche plusieurs images sur une seule page Web. Dans bootstrap 5, pour convertir les images en vignette .IMG-Thumbnail La classe est utilisée.
Html
Afin de faire apparaître notre image comme une miniature .classe IMG-Thumbnail. Cette classe fait essentiellement une vignette avec une bordure.
Sortir
Une vignette a été créée avec succès.
Alignement des images en bootstrap 5
En plus de façonner les images, les aligner dans la bonne position est également très significatif. Cette section traite de plusieurs classes qui vous aident à aligner les images dans Bootstrap 5.
.lancer un flotteur
Cette classe positionne une image au début du conteneur.
Html
Ici tout d'abord, nous avons créé un conteneur et placé une image à l'intérieur. Afin de placer cette image au début du conteneur, nous lui attribuons le .Classe de mise en marche et une certaine largeur et hauteur.
Sortir
L'image a été positionnée au début du conteneur.
.flotte
Dans le but de placer une image à la fin du conteneur, cette classe est utilisée.
Html
Dans le code ci-dessus, pour positionner l'image à la fin du récipient, nous avons donné à la balise le .classe flottante.
Sortir
L'image a été placée avec succès à la fin du conteneur.
.MX-AUTO .bloc D
Ces classes sont utilisées pour centrer une image à l'intérieur d'un conteneur. Le .MX-AUTO La classe ajuste la marge à l'auto et au .bloc D La classe affiche une image comme un bloc. Voici comment ces classes sont utilisées.
Html
Aux fins de centrer une image le .MX-Auto et .Les classes D-Block ont été affectées à l'image dans l'extrait de code ci-dessus.
Sortir
L'image a été centrée.
Images réactives en bootstrap 5
Dans le but de rendre les images réactives qui modifient leur comportement en fonction de la largeur de l'appareil, utilisez la classe mentionnée ci-dessous fournie par bootstrap 5.
.IMG-fluide
Le .La classe IMG-FLUID fait une image modifier sa taille en fonction de la taille de l'écran. L'image utilisant cette classe modifiera sa taille en correspondance à l'élément parent, en outre, cette classe ajuste la largeur maximale de l'image à 100% et à la hauteur.
Html
Dans le code ci-dessus, nous attribuons la classe IMG-FLUID à l'image. Afin de voir l'effet de cette classe à l'échelle de votre fenêtre de navigateur de haut en bas.
Sortir
Lorsque la largeur de l'écran est de 680px et plus.
À la largeur de l'écran 400px et en dessous.
L'image a été rendue avec succès réactive.
Conclusion
Les cours d'image dans Bootstrap 5 vous permettent de styliser les images apparaissant sur votre site Web. En utilisant ces classes, vous pouvez donner à des images une certaine forme, un alignement ou vous pouvez également les rendre réactifs. Certaines classes d'image Bootstrap 5 sont .arrondi, .IMG-fluide, .Float-start, etc. Ces classes sont discutées en détail, élaborant le but qu'ils servent.