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>

Forms Input groups