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.
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.
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok