BBS5 Images

BS5 Images

Bootstrap 5 provides classes to style images.

Image Shapes

• .rounded adds rounded corners to an image
• .rounded-circle shapes the image to a circle
• .img-thumbnail shapes the image to a thumbnail (border)

Aligning Images

Float an image to the right with the .float-end class or to the left with .float-start.

Center an image by adding the utility classes .mx-auto (margin: auto) and .d-block (display: block) to the image.

Responsive Images

Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.

Create responsive images by adding an .img-fluid class to the <img> tag. The image will then scale nicer to the parent element.

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

<img src="img_girl.jpg" class="img-fluid" alt="Girl in a jacket">