Images & figures

Image styles and figure component for displaying images and text.

Bootstrap docs

Image shapes

Square image
Rounded image
Circle image
<!-- Square image (default) -->
<img src="assets/img/team/01.jpg" alt="Square image">

<!-- Rounded image -->
<img src="assets/img/team/02.jpg" class="rounded-3" alt="Rounded image">

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

Thumbnails

Square thumbnail
Rounded thumbnail
Circle thumbnail
<!-- Square thumbnail -->
<img src="assets/img/team/08.jpg" class="img-thumbnail rounded-0" alt="Square thumbnail">

<!-- Rounded thumbnail -->
<img src="assets/img/team/06.jpg" class="img-thumbnail" alt="Rounded thumbnail">

<!-- Circle thumbnail -->
<img src="assets/img/team/07.jpg" class="img-thumbnail rounded-circle" alt="Circle thumbnail">

Figures with caption

Figure with caption
Caption on the left
Figure with caption
Caption in the center
Figure with caption
Caption on the right
<!-- Caption on the left -->
<figure class="figure">
  <img src="assets/img/team/01.jpg" class="figure-img" alt="...">
  <figcaption class="figure-caption">Caption on the left</figcaption>
</figure>

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

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

Image swap on hover

Angular
Angular Angular
<!-- Image swap on hover -->
<div class="swap-image">
  <img src="assets/img/landing/app-showcase-3/integrations/angular-gray.svg" class="swap-from" width="196" alt="Angular">
  <div class="swap-to">
    <img src="assets/img/landing/app-showcase-3/integrations/angular-color-light.svg" class="light-mode-img" width="196" alt="Angular">
    <img src="assets/img/landing/app-showcase-3/integrations/angular-color-dark.svg" class="dark-mode-img" width="196" alt="Angular">
  </div>
</div>
Top