Images
Give images responsive behavior and styles.
Responsive images
Images are made responsive using .img-fluid
. This will set max-width: 100%;
and height: auto;
to the image so that it scales with the parent element.
<img src="..." class="img-fluid" alt="Responsive image">
Image thumbnails
Use .img-thumbnail
to give an image a rounded 1px border appearance.
<img src="/solid/img/demo-article-2.jpg" class="img-thumbnail w-50 shadow" alt="">
Aligning images
Align images with float
classes (.float-left
or .float-right
). Block-level images (.d-block
) can be centered using the .mx-auto
class.
Picture
When 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 the <picture>
tag.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail shadow" alt="...">
</picture>
Overlays
Overlay a pattern or color to an image to change its appearance. Simply wrap an image in a .img-overlay
element and add a pattern or color modifier:
.pattern-{number}
, where number is a value from 1 to 5.overlay-{strength}
and.bg-{color}
, where strength may be light, medium or strong, and color any color from the color palette.
Pattern 1
Pattern 2
Pattern 3
Pattern 4
Pattern 5
Light color
Medium color
Strong color
<div class="row">
<div class="col-md-4">
<h6 class="text-muted">Pattern 1</h6>
<div class="img-overlay pattern-1 shadow">
<img src="/solid/img/demo-landscape.jpg" class="img-fluid">
</div>
</div>
<div class="col-md-4">
<h6 class="text-muted">Pattern 2</h6>
<div class="img-overlay pattern-2 shadow">
<img src="/solid/img/demo-landscape.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-4">
<h6 class="text-muted">Pattern 3</h6>
<div class="img-overlay pattern-3 shadow">
<img src="/solid/img/demo-landscape.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-4">
<h6 class="text-muted">Pattern 4</h6>
<div class="img-overlay pattern-4 shadow">
<img src="/solid/img/demo-landscape.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-4">
<h6 class="text-muted">Pattern 5</h6>
<div class="img-overlay pattern-5 shadow">
<img src="/solid/img/demo-landscape.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-4">
<h6 class="text-muted">Light color</h6>
<div class="img-overlay overlay-light bg-primary shadow">
<img src="/solid/img/demo-landscape.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-4">
<h6 class="text-muted">Medium color</h6>
<div class="img-overlay overlay-medium bg-primary shadow">
<img src="/solid/img/demo-landscape.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-4">
<h6 class="text-muted">Strong color</h6>
<div class="img-overlay overlay-strong bg-primary shadow">
<img src="/solid/img/demo-landscape.jpg" alt="" class="img-fluid">
</div>
</div>
</div>