Skip to main content

Images

Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.

Idea React provides the Image wrapper for these examples. Set fluid for .img-fluid and thumbnail for .img-thumbnail; all other <img> attributes pass through.

Responsive images

Images in Bootstrap are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.

Responsive image

Image thumbnails

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

Aligning images

Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class.

Image aligned to the startImage aligned to the end
Image centered as a block
Image centered by its parent's text alignment

Figures

Anytime you need to display a piece of content—like an image with an optional caption—consider using a <figure> element. Figures are flex containers in Bootstrap, so you can easily modify the layout and alignment with our flex utilities.

Use the included .figure and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add fluid to your Image to make it responsive.

A sample image inside a figure
A caption for the above image.

And with a reverse alignment:

A sample image inside a reverse-aligned figure
A caption for the above image.

Picture

If you are using the <picture> element to specify multiple <source> elements for a specific <img>, make sure to add the .img-* classes to the <img> and not to the <picture> tag.

Give the <img> an alt text that describes the image, or an empty alt="" when it's only decorative. The alt="..." in the example below is a placeholder for that text.

<picture>
    <source srcset="..." type="image/svg+xml" />
    <img src="..." class="img-fluid img-thumbnail" alt="..." />
</picture>

CSS

Image thumbnails and figures use Bootstrap's CSS variables and Sass maps. See the upstream images CSS for the variable reference.