Images
Allow images to become responsively resized, or add a bit of style to them.
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.
Image Thumbnail
Use .img-thumbnail
to give an image a bordered appearance.
You might also want to check the border utilites for additional options.
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.
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.
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.