Bootstrap docs

# Images & figures

Image styles and figure component for displaying images and text.

#### Image shapes

    <!-- Square image (default) -->
    <img src="assets/img/shop/furniture/product/06.jpg" alt="Square image">

    <!-- Rounded image -->
    <img src="assets/img/blog/list/02.jpg" class="rounded-4" alt="Rounded image">

    <!-- Circle image -->
    <img src="assets/img/blog/list/03.jpg" class="rounded-circle" alt="Circle image">

#### Thumbnails

    <!-- Square thumbnail -->
    <img src="assets/img/shop/furniture/product/06.jpg" class="img-thumbnail rounded-0" alt="Square thumbnail">

    <!-- Rounded thumbnail (default) -->
    <img src="assets/img/blog/list/02.jpg" class="img-thumbnail" alt="Rounded thumbnail">

    <!-- Circle thumbnail -->
    <img src="assets/img/blog/list/03.jpg" class="img-thumbnail rounded-circle" alt="Circle thumbnail">

#### Figures with caption

Caption on the left
Caption in the center
Caption on the right

    <!-- Caption on the left -->
    <figure class="figure">
      <img src="assets/img/shop/furniture/product/06.jpg" class="figure-img rounded" alt="Image">
      <figcaption class="figure-caption">Caption on the left</figcaption>
    </figure>

    <!-- Caption in the center -->
    <figure class="figure">
      <img src="assets/img/blog/list/02.jpg" class="figure-img rounded" alt="Image">
      <figcaption class="figure-caption text-center">Caption in the center</figcaption>
    </figure>

    <!-- Caption on the right -->
    <figure class="figure">
      <img src="assets/img/blog/list/03.jpg" class="figure-img rounded" alt="Image">
      <figcaption class="figure-caption text-end">Caption on the right</figcaption>
    </figure>

#### Image swap on hover

    <!-- Swap images on hover -->
    <div class="position-relative hover-effect-opacity rounded overflow-hidden" style="max-width: 306px;">
      <img src="assets/img/shop/furniture/04.png" class="hover-effect-target opacity-100" alt="Image idle">
      <img src="assets/img/shop/furniture/04-hover.jpg" class="position-absolute top-0 start-0 hover-effect-target opacity-0" alt="Image hover">
    </div>

#### Image scale (zoom) on hover

    <!-- Scale (zoom) image on hover -->
    <div class="hover-effect-scale rounded overflow-hidden" style="max-width: 306px;">
      <img src="assets/img/shop/furniture/product/06.jpg" class="hover-effect-target" alt="Image">
    </div>

Top