v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

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.

Generic responsive image
<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 A generic square placeholder image with rounded corners
<img src="..." class="radius float-start" alt="...">
<img src="..." class="radius float-end" alt="...">
A generic square placeholder image with rounded corners
<img src="..." class="radius mx-auto d-block" alt="...">
A generic square placeholder image with rounded corners
<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.