Images & figures

Image styles and figure component for displaying images and text.

React Bootstrap docs

Image shapes

Square image
Rounded image
Circle image
import ImageLoader from '../components/ImageLoader'

{/* Square image (default) */}
<ImageLoader
  src='/images/components/03.jpg'
  width={256}
  height={256}
  alt='Square image'
/>

{/* Rounded image */}
<ImageLoader
  src='/images/components/02.jpg'
  width={256}
  height={256}
  alt='Rounded image'
  className='rounded-3'
/>

{/* Circle image */}
<ImageLoader
  src='/images/components/01.jpg'
  width={256}
  height={256}
  alt='Circle image'
  className='rounded-circle'
/>

Thumbnails

Square thumbnail
Rounded thumbnail
Circle thumbnail
import ImageLoader from '../components/ImageLoader'

{/* Square thumbnail */}
<div className='img-thumbnail rounded-0'>
  <ImageLoader
    src='/images/components/03.jpg'
    width={256}
    height={256}
    alt='Square thumbnail'
  />
</div>

{/* Rounded thumbnail (default) */}
<div className='img-thumbnail'>
  <ImageLoader
    src='/images/components/02.jpg'
    width={256}
    height={256}
    alt='Rounded thumbnail'
  />
</div>

{/* Circle thumbnail */}
<div className='img-thumbnail rounded-circle'>
  <ImageLoader
    src='/images/components/01.jpg'
    width={256}
    height={256}
    alt='Circle thumbnail'
  />
</div>

Figures with caption

Figure with caption
Caption on the left
Figure with caption
Caption in the center
Figure with caption
Caption on the right
import ImageLoader from '../components/ImageLoader'
import Figure from 'react-bootstrap/Figure'

{/* Figure caption on the left (default) */}
<Figure>
  <ImageLoader
    src='/images/components/01.jpg'
    width={256}
    height={256}
    alt='Figure with caption'
    className='rounded'
  />
  <Figure.Caption>Caption on the left</Figure.Caption>
</Figure>

{/* Figure Caption in the center */}
<Figure>
  <ImageLoader
    src='/images/components/02.jpg'
    width={256}
    height={256}
    alt='Figure with caption'
    className='rounded'
  />
  <Figure.Caption className='text-center'>Caption in the center</Figure.Caption>
</Figure>

{/* Figure caption on the right */}
<Figure>
  <ImageLoader
    src='/images/components/03.jpg'
    width={256}
    height={256}
    alt='Figure with caption'
    className='rounded'
  />
  <Figure.Caption className='text-end'>Caption on the right</Figure.Caption>
</Figure>

Image swap on hover

Image toImage from
Image toImage from
import ImageSwap from '../components/ImageSwap'

{/* Non-clickable div example */}
<ImageSwap
  swapFrom={{
    imgSrc: '/images/real-estate/brands/02_gray.svg',
    imgSize: [196, 80],
    imgAlt: 'Image from'
  }}
  swapTo={{
    imgSrc: '/images/real-estate/brands/02_color.svg',
    imgSize: [196, 80],
    imgAlt: 'Image to'
  }}
/>

{/* Clickable link example */}
<ImageSwap
  href='#'
  swapFrom={{
    imgSrc: '/images/real-estate/brands/04_gray.svg',
    imgSize: [196, 80],
    imgAlt: 'Image from'
  }}
  swapTo={{
    imgSrc: '/images/real-estate/brands/04_color.svg',
    imgSize: [196, 80],
    imgAlt: 'Image to'
  }}
/>