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">

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>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for the image CSS styles.

Name	Type	Default	Description
`$enable-img`	boolean	`true`	Enable the generation of the image CSS classes. Smaller segements of the image CSS classes can be disabled with the following `$enable-*` variables.
`$enable-img-fluid`	boolean	`true`	Enable the generation of the fluid image CSS class.
`$enable-img-thumbnail`	boolean	`true`	Enable the generation of the thumbnail CSS class.
`$thumbnail-padding`	string	`.25rem`	Thumbnail padding.
`$thumbnail-bg`	string	`$body-bg`	Thumbnail background color.
`$thumbnail-border-width`	string	`$border-width`	Thumbnail border width.
`$thumbnail-border-color`	string	`$uibase-300`	Thumbnail border color.
`$thumbnail-border-radius`	string	`$border-radius`	Thumbnail border radius.
`$thumbnail-box-shadow`	string	`0 .0625rem .125rem rgba($black, .075)`	Optional thumbnail box shadow.

Mixins

No mixins available.