brand v1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
Behavioral
Layout

Images

Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.

Image Shapes

Change the shape of an image using .rounded or .circle modifier classes. In addition use .img-thumbnail to give an image 1px border appearance.

img
img
img
img 
														
<div class="col-sm-6 col-md-3">
	<img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
</div>
<div class="col-sm-6 col-md-3">
	<img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
</div>
<div class="col-sm-6 col-md-3">
	<img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
</div>
<div class="col-sm-6 col-md-3">
	<img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
</div>
Class Values
class="img-fluid [value]" rounded / circle / warning / img-thumbnail
Aligning images

Align images with the helper float classes or text alignment classes.

img img
Align Center
img 
														
<div class="w-100 bg-light clearfix">
	<img src="dist/img/img-thumb1.jpg" class="img-fluid float-start" alt="img">
	<img src="dist/img/img-thumb1.jpg" class="img-fluid float-end" alt="img">
</div>
<h6 class="my-5">Align Center</h6>
<div class="w-100 bg-light">
	<img src="dist/img/img-thumb1.jpg" class="img-fluid mx-auto d-block" alt="img">
</div>
Figures

Anytime you need to display a piece of content—like an image with an optional caption, consider using a figure. Aligning the figure’s caption is easy with text utilities.

A generic square placeholder image with rounded corners in a figure.
Left Aligned Caption
A generic square placeholder image with rounded corners in a figure.
Right Aligned Caption
														
<figure class="figure">
	<img src="dist/img/img-thumb.jpg" class="figure-img w-200p me-40 img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
	<figcaption class="figure-caption">Left Aligned Caption</figcaption>
</figure>
<figure class="figure">
	<img src="dist/img/img-thumb.jpg" class="figure-img w-200p img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
	<figcaption class="figure-caption text-end">Right Aligned Caption</figcaption>
</figure>
Jump to