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.

    171x180
    Nulla vitae elit libero, a pharetra augue mollis interdum.
    <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>;
    Press esc to disable tab trapping

    API

    Figureview source file

    import Figure from 'react-bootstrap/Figure'
    NameTypeDefaultDescription
    as
    elementType
    		<figure>

    You can use a custom element type for this component.

    bsPrefix
    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.

    FigureImageview source file

    import FigureImage from 'react-bootstrap/FigureImage'
    NameTypeDefaultDescription
    fluid
    boolean
    		true

    Sets image as fluid image.

    rounded
    boolean

    Sets image shape as rounded.

    roundedCircle
    boolean

    Sets image shape as circle.

    thumbnail
    boolean

    Sets image shape as thumbnail.

    bsPrefix
    string
    		'img'

    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.

    FigureCaptionview source file

    import FigureCaption from 'react-bootstrap/FigureCaption'
    NameTypeDefaultDescription
    as
    elementType
    		<figcaption>

    You can use a custom element type for this component.

    bsPrefix
    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.