W3cubDocs

Figures

Anytime you need to display a piece of content, like an image with an optional caption, consider using a Figure.

Figure

Displaying related images and text with the Figure component.

<Figure>
  <Figure.Image
    width={171}
    height={180}
    alt="171x180"
    src="holder.js/171x180"
  />
  <Figure.Caption>
    Nulla vitae elit libero, a pharetra augue mollis interdum.
  </Figure.Caption>
</Figure>

API

Figure

import Figure from 'react-bootstrap/Figure'

Name	Type	Default	Description
as	elementType	`<figure>`	You can use a custom element type for this component.
bsPrefix required	string	`'figure'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

FigureImage

import FigureImage from 'react-bootstrap/FigureImage'

Name	Type	Default	Description

FigureCaption

import FigureCaption from 'react-bootstrap/FigureCaption'

Name	Type	Default	Description
as	elementType	`<figcaption>`	You can use a custom element type for this component.
bsPrefix required	string	`'figure-caption'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/figures/