Images

Responsive images

Set .img-fluid to img . It scales to the parent width if the image is wider than the parent.

img.img-fluid

Image thumbnails

img.rounded rounds corners of an image (⇒ Border-radius ).

img.img-thumbnail shows an image with a rounded 1px border.

Aligning images

Use .float-(left|right) to float an image on left or right (⇒ Float)

.mx-auto (⇒ Spacing ) can be used to center a fixed-width block element

Text alignment .text(left|center|right) (⇒ Text alignment ) can be also used.

img inside div.text-left

img inside div.text-center

img inside div.text-right

Using picture

picture can be used to switch images with a viewport size. The folowing example changes an image on breakpoint boundaries.

Structure

• picture
  • source Attributes
    • Attribute media="(min-width: 1200px)"
    • Attribute srcset="../img/1140x642.svg"
  • source Attributes
    • Attribute media="(min-width: 992px)"
    • Attribute srcset="../img/960x540.svg"
  • source Attributes
    • Attribute media="(min-width: 768px)"
    • Attribute srcset="../img/720x405.svg"
  • img.img-fluid Attribute
    • Attribute src="../img/540x304.svg"