Images

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.

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

Image thumbnails

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

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

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.

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

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

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

Image ratios

With OpenFrontend.Framework, managing the aspect ratios of your images has become even more convenient. This approach provides you with better control and flexibility towards your design needs.

To apply the desired aspect ratio to an image, use the classes in conjunction with .aspect and .object-fit-cover. The .aspect class sets the container’s aspect ratio, while .object-fit-cover ensures the image scales to fit its container without distortion.

Please refer to the Aspect Ratios helper at this link for the available classes and their corresponding aspect ratios.

<div>
<img src="..." class="aspect aspect-9x16 object-fit-cover" alt="...">
</div>

<div>
<img src="..." class="aspect aspect-3x4 object-fit-cover" alt="...">
</div>

<div>
<img src="..." class="aspect aspect-1x1 object-fit-cover" alt="...">
</div>

<div>
<img src="..." class="aspect aspect-4x3 object-fit-cover" alt="...">
</div>

<div>
<img src="..." class="aspect aspect-16x9 object-fit-cover" alt="...">
</div>

<div>
<img src="..." class="aspect aspect-21x9 object-fit-cover" 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>

CSS

Sass variables

Variables are available for image thumbnails.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      var(--#{$prefix}body-bg);
$thumbnail-border-width:            var(--#{$prefix}border-width);
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           var(--#{$prefix}border-radius);
$thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm);