Images & figures

— Image styles and figure component for displaying images and text. Bootstrap images docs, Bootstrap figures docs.

Image shapes

<!-- Square image (default) -->
<img src="path-to-image" alt="Square image">

<!-- Rounded image -->
<img src="path-to-image" class="rounded" alt="Rounded image">

<!-- Circle image -->
<img src="path-to-image" class="rounded-circle" alt="Circle image">

// Square image (default)
img(src="path-to-image", alt="Square image")

// Rounded image
img(src="path-to-image", alt="Rounded image").rounded

// Circle image
img(src="path-to-image", alt="Circle image").rounded-circle

Thumbnails

<!-- Square thumbnail -->
<img src="path-to-image" class="img-thumbnail" alt="Square image">

<!-- Rounded thumbnail -->
<img src="path-to-image" class="img-thumbnail rounded" alt="Rounded image">

<!-- Circle thumbnail -->
<img src="path-to-image" class="img-thumbnail rounded-circle" alt="Circle image">

// Square tumbnail
img(src="path-to-image", alt="Square image").img-thumbnail

// Rounded tumbnail
img(src="path-to-image", alt="Rounded image").img-thumbnail.rounded

// Circle tumbnail
img(src="path-to-image", alt="Circle image").img-thumbnail.rounded-circle

Figures with caption

Figure with caption — Caption on the left

<!-- Caption on the left -->
<img src="path-to-image" class="img-thumbnail" alt="Square image">

<!-- Caption in the center -->
<img src="path-to-image" class="img-thumbnail rounded" alt="Rounded image">

<!-- Caption on the right -->
<img src="path-to-image" class="img-thumbnail rounded-circle" alt="Circle image">

// Caption on the left
img(src="path-to-image", alt="Square image").img-thumbnail

// Caption in the center
img(src="path-to-image", alt="Rounded image").img-thumbnail.rounded

// Caption on the right
img(src="path-to-image", alt="Circle image").img-thumbnail.rounded-circle