Images

Photos that stay sharp and never stretch

Responsive

Width follows the box; the height follows the photo.

Show the code

<img class="w-100 rounded" src="assets/demo/products/sourdough-loaf.jpg" alt="A sourdough loaf on a linen cloth" width="1200" height="900" style="max-width: 300px">

With a caption

A figure names what it shows.

A raspberry tart — Raspberry tart, Market Street’s bestseller in September.

Show the code

<figure class="m-0 stack tight" style="max-width: 300px">
<img class="w-100 rounded" src="assets/demo/products/raspberry-tart.jpg" alt="A raspberry tart" width="1200" height="900">
<figcaption class="fs-sm muted">Raspberry tart, Market Street’s bestseller in September.</figcaption>
</figure>

Thumbnails

The table size, 48 by 36.

Show the code

<img class="thumb" src="assets/demo/products/butter-croissant.jpg" alt="Butter croissant" width="48" height="36">
<img class="thumb" src="assets/demo/products/cappuccino.jpg" alt="Cappuccino" width="48" height="36">
<img class="thumb" src="assets/demo/products/honey.jpg" alt="Wildflower honey" width="48" height="36">
<img class="thumb" src="assets/demo/products/tote-bag.jpg" alt="Tote bag" width="48" height="36">