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>