Image
Opt your images into responsive behavior and add lightweight styles to them, all via classes.
Responsive images
Images in Bootstrap are made responsive with .img-fluid
. max-width: 100%;
and height: auto;
are applied to the image so that it scales with the parent element.
![Responsive image](../assets/img/thumb/1.jpg)
<img src="..." class="img-fluid" alt="Responsive image">
Image shapes
Easily create images in different shapes with adding one class to the <img> tag.
![Round image](../assets/img/avatar/1.jpg)
![Circle image](../assets/img/avatar/2.jpg)
![Thumbnail](../assets/img/avatar/3.jpg)
<img src="..." class="rounded" alt="Round image">
<img src="..." class="rounded-circle" alt="Circle image">
<img src="..." class="img-thumbnail" alt="Thumbnail">
Figures
Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>
.
![...](../assets/img/thumb/1.jpg)
<figure class="figure img-thumbnail bg-lighter">
<img src="..." class="figure-img img-fluid" alt="Image">
<figcaption class="figure-caption text-center">A caption for the above image.</figcaption>
</figure>