Images are mostly used in modern web design. Therefore, styling images and placing them properly on the web pages is very important for improving the user experience.
The bootstrap provides different classes for images to make their look better and also to make them responsive. Making an image responsive means it should scale according to its parent element. That is, the size of the image should not overflow its parent element and will grow and shrink according to the change in the size of its parent without losing its aspect ratio.
The following are the different classes available in Bootstrap for image:
Responsive Images:
Bootstrap offers the .img-fluid class to make an image responsive means scale appropriately across devices. Also applied max-width: 100% and height: auto to the image to ensures that the image scales to the parent element.
Rounded Corners Image:
By using .rounded class, you can create a rounded corner image. This class is used with <img> tag.
Circle Image:
By using .rounded-circle class, you can create a circle shape image. This class is used with <img> tag.
Thumbnail Image:
By using .img-thumbnail class, you can create thumbnail (bordered) image. This class is used with <img> tag.
Image Alignment:
Float an image to the left or right by using bootstrap classes for eg. .float-left, .float-right, .float-*-left, and .float-*-right. These classes float an element left or right, or disable floating, based on the current viewport size.
Following are the bootstrap responsive float classes for aligning images to the left are .float-left, .float-sm-left, .float-md-left, .float-lg-left, and .float-xl-left.
The bootstrap responsive float classes for aligning images to the right are .float-right, .float-sm-right, .float-md-right, .float-lg-right, and .float-xl-right.
For disable floating, you can use .float-none and the various .float-*-none classes.
Centering Block-Level Images:
The .mx-auto (margin:auto) and .d-block (display:block) classes are used to set the image into center.
Centering Non-Block-Level Images:
To center a non-block-level image, use bootstrap .text-center and .text-*-center classes.