How to Style Images using Bootstrap

Bootstrap provides classes that can be used to apply styles to the images. These images turn into responsive behavior, so they never become larger than their parent elements.

images/coding/coding05.webp

You can also use border-radius utilities.

1. Image Thumbnail

You can use .img-thumbnail to give an image a rounded 1px border appearance.

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

2. Responsive Images

Responsive images automatically adjust to fit the size of the screen. You can create responsive images by adding an .img-fluid class to the <img> tag. 

This class applies display: block; and 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">

3. Figures

Anytime you need to display a piece of content, like an image with an optional caption, you should use <figure> element. Figures are used for displaying related images and text.

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

You can align the figure’s caption with text utilities.

You have to apply four classes:

  1. .figure to the <figure> element.
  2. .figure-img to the <img> element.
  3. .img-fluid to the <img> element for the responsive behaviour.
  4. .figure-caption to <figcaption> element.