Images

Responsive Images

Images in Bootstrap are made responsive with .img-fluid, which applies max-width: 100% and height: auto.

<img src="..." class="img-fluid" alt="Responsive image">

Image Thumbnails

Use the .img-thumbnail class to give an image a rounded 1px border appearance with a small amount of padding.

<img src="..." class="img-thumbnail" alt="Thumbnail">

Alignment & Corners

Align images with helper classes like .float-start, .float-end, or center them using .mx-auto.d-block.

<!-- Floated -->
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

<!-- Centered -->
<img src="..." class="rounded mx-auto d-block" alt="...">

Figures

Use the <figure> and <figcaption> elements to present images with a description.

Figure appearance — A descriptive caption for the image figure.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>