Content

Styles for displaying content with some of the most commonly used HTML elements, including normalization, typography, images, tables, buttons, forms, and more.

Images

Allow images to become responsively resized, or add a bit of style to them.

Page Contents

Responsive Images

Images can be made to scale with their container width by using .img-fluid. This applies max-width: 100%; and height: auto; the image, allowing the aspect ratio to be maintained.

<img src="..." class="img-fluid" alt="Fluidly sized image">

SVG Images and IE 10

In Internet Explorer 10, SVG images with .img-fluid are disproportionately sized. To fix this, add width: 100% \9; where necessary. This fix improperly sizes other image formats, so we do not apply it automatically.

Image Thumbnail

Use .img-thumbnail to give an image a bordered appearance.

You might also want to check the border utilites for additional options.

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

<img src="..." alt="..." class="img-thumbnail">

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.

A generic square placeholder image with rounded corners

<img src="..." class="radius float-start" alt="...">
<img src="..." class="radius float-end" alt="...">

<img src="..." class="radius mx-auto d-block" alt="...">

<div class="text-center">
  <img src="..." class="radius" alt="...">
</div>

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.

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