Bootstrap 4 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.

Resize your browser to see the image scale as the viewport becomes smaller.

To see the image scale upwards, open the preview in a new window

<img src="/pix/samples/22l.jpg" class="img-fluid" alt="Sample photo">

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 uses .img-fluid for responsive images.

Bootstrap 3 uses .img-responsive (see Bootstrap 3 Images).

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.

<img src="/pix/samples/8s.jpg" class="rounded" alt="Sample image">
<img src="/pix/samples/9s.jpg" class="rounded-circle" alt="Sample image">
<img src="/pix/samples/10s.jpg" class="img-thumbnail" alt="Sample image">
<img src="/pix/samples/11s.jpg" class="rounded-top" alt="Sample image">

The utility classes can be applied to any element (not just images). The border radius classes are:

rounded
rounded-top
rounded-right
rounded-bottom
rounded-left
rounded-circle
rounded-0

Image Alignment

You can use either Bootstrap's helper float classes or text alignment classes to align images horizontally.

Float

Use Bootstrap's .float-left, .float-right, .float-*-left, and .float-*-right 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.

<img src="/pix/samples/9s.jpg" class="rounded-circle float-left" alt="Sample image">
<img src="/pix/samples/10s.jpg" class="rounded-circle float-right" alt="Sample image">

The 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 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.

You can also use .float-none and the various .float-*-none classes to disable floating.

Centering Block-Level Images

Use Bootstrap's .mx-auto to center an image with .d-block applied. This sets margin: auto.

<img src="/pix/samples/9m.jpg" class="img-circle mx-auto d-block" alt="Sample photo">

You can also use any of the responsive .mx-*-auto classes.

Bootstrap 3 uses .center-block to center block-level images.

Bootstrap 4 uses .mx-auto and .mx-*-auto.

Centering Non-Block-Level Images

You can use Bootstrap's .text-center and .text-*-center classes on the image's parent to center a non-block-level image.

<div class="text-center">
<img src="/pix/samples/9m.jpg" class="img-circle" alt="Sample photo">
</div>

The classes are .text-center, .text-sm-center, .text-md-center, .text-lg-center, and .text-xl-center.

You can also use the .text-left, .text-right, .text-*-left, and .text-*-right helper classes.

Bootstrap 4 vs Bootstrap 3

Bootstrap 4's helper class names include the size (eg, .float-xs-right).

Bootstrap 3's helper classes use don't include the size (eg, .pull-right).