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