Loading...
Customize

Customize theme

Colors
Primary
Warning
Info
Success
Danger
Typography (1rem = 16px)
Borders / Rounding

Menu

Content

Components

Utilities

Buy now

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/portfolio/list/04.jpg" alt="Square image">

<!-- Rounded image -->
<img src="assets/img/portfolio/list/03.jpg" class="rounded-5" alt="Rounded image">

<!-- Circle image -->
<img src="assets/img/portfolio/list/01.jpg" class="rounded-circle" alt="Circle image">
// Square image (default)
img(src="assets/img/portfolio/list/04.jpg", alt="Square image")

// Rounded image
img(src="assets/img/portfolio/list/03.jpg", alt="Rounded image").rounded-5

// Circle image
img(src="assets/img/portfolio/list/01.jpg", alt="Circle image").rounded-circle

Thumbnails

Square image
Rounded image
Circle image
<!-- Square thumbnail -->
<img src="assets/img/portfolio/list/04.jpg" class="img-thumbnail rounded-0" alt="Square thumbnail">

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

<!-- Circle thumbnail -->
<img src="assets/img/portfolio/list/01.jpg" class="img-thumbnail rounded-circle" alt="Circle thumbnail">
// Square thumbnail
img(src="assets/img/portfolio/list/04.jpg", alt="Square image").img-thumbnail.rounded-0

// Rounded thumbnail (default)
img(src="assets/img/portfolio/list/03.jpg", alt="Rounded image").img-thumbnail

// Circle thumbnail
img(src="assets/img/portfolio/list/01.jpg", alt="Circle image").img-thumbnail.rounded-circle

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/portfolio/list/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/portfolio/list/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/portfolio/list/04.jpg" class="figure-img" alt="...">
  <figcaption class="figure-caption text-end">Caption on the right</figcaption>
</figure>
// Caption on the left
figure.figure
  img(src="assets/img/portfolio/list/01.jpg", alt="...").figure-img
  figcaption.figure-caption Caption on the left

// Caption in the center
figure.figure
  img(src="assets/img/portfolio/list/02.jpg", alt="...").figure-img
  figcaption.figure-caption.text-center Caption in the center

// Caption on the right
figure.figure
  img(src="assets/img/portfolio/list/04.jpg", alt="...").figure-img
  figcaption.figure-caption.text-end Caption on the right

Image swap on hover

<!-- Image swap on hover -->
<a href="#" class="swap-image">
  <img src="assets/img/landing/saas-1/brands/champion-color.svg" class="swap-to" width="180" alt="Champion">
  <div class="swap-from">
    <img src="assets/img/landing/saas-1/brands/champion-gray.svg" class="d-dark-mode-none" width="180" alt="Champion">
    <img src="assets/img/landing/saas-1/brands/champion-light.svg" class="d-none d-dark-mode-block" width="180" alt="Champion">
  </div>
</a>
// Image swap on hover
a(href="#").swap-image
  img(src="assets/img/landing/saas-1/brands/champion-color.svg", width="180", alt="Champion").swap-to
  .swap-from
    img(src="assets/img/landing/saas-1/brands/champion-gray.svg", width="180", alt="Champion").d-dark-mode-none
    img(src="assets/img/landing/saas-1/brands/champion-light.svg", width="180", alt="Champion").d-none.d-dark-mode-block