Figures

Documentation and examples for displaying related images and text with the figure component in Bootstrap.

Figure

Displaying related images and text with the Figure component.

Result

Loading...

Live Editor

import Figure from 'react-bootstrap/Figure'; function FigureExample() { return ( <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> ); } export default FigureExample;

import Figure from 'react-bootstrap/Figure';

function FigureExample() {
  return (
    <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>
  );
}

export default FigureExample;

API

Figure

FigureImage

FigureCaption