Bootstrap Images

Overview

Bootstrap provides classes for styling images to make them responsive and add various effects.

Responsive Images

Images in Bootstrap are made responsive with .img-fluid. This applies 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="..." class="img-thumbnail" alt="Thumbnail">

Aligning Images

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

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

<!-- Inline -->
<img src="..." class="rounded" alt="...">