Bootstrap 5 Images
Create responsive images and image shapes with Bootstrap's image styles.
Bootstrap provides classes that can be used when working with the img
element. Most of these are utility classes that can be applied to any element (not just images). However, there is a class specifically for responsive images.
Responsive Images
Bootstrap provides the .img-fluid
class to make an image scale appropriately across devices. This class applies max-width: 100%
and height: auto
to the image. This ensures that the image scales to the parent element.
To see the following image scale, open the preview in a new window, then resize your browser.
Rounded Corners & Thumbnails
You can use Bootstrap to render images with rounded corners or as a circle. This is acheived with the .rounded-*
utility classes.
You can also use the .img-thumbnail
class to give it a rounded 1 pixel border.
The utility classes can be applied to any element (not just images). The border radius classes are:
rounded
rounded-top
rounded-end
rounded-bottom
rounded-start
rounded-circle
rounded-pill
Image Alignment
You can use either Bootstrap's helper float classes or text alignment classes to align images horizontally.
Float
Use Bootstrap's .float-start
, .float-end
, and .float-*-*
classes to float an image to the left or right. These classes float an element to the left or right, or disable floating, based on the current viewport size.
The responsive float classes are:
.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none
The .float-none
and .float-*-none
classes disable floating.
Centering Block-Level Images
Use Bootstrap's .mx-auto
to center an image with .d-block
applied. This sets margin: auto
.
You can also use any of the responsive .mx-*-auto
classes.
Centering Non-Block-Level Images
You can use Bootstrap's .text-center
class on the image's parent to center a non-block-level image.
See the Bootstrap 5 documentation for more about text alignment.