React Bootstrap Figures
React Figures - Bootstrap 4 & Material Design
React Bootstrap figures are commonly used elements for displaying images with the caption. A caption can be left-aligned or right-align.
Use the included .figure , .figure-img and
.figure-caption classNames to provide some baseline styles for the
HTML5 <figure> and
<figcaption> elements. Images in figures have no explicit
size, so be sure to add the .img-fluid className to your
<img> to make it responsive.
Basic example
.jpg)
import React from "react";
const FiguresPage = () => {
return (
<figure className="figure">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(73).jpg" className="figure-img img-fluid z-depth-1"
alt="" style={{width: '400px'}} />
<figcaption className="figure-caption">
A caption for the above image.
</figcaption>
</figure>
);
}
export default FiguresPage;
Aligning
Aligning the figure’s caption is easy with our text utilities.
import React from "react";
const FiguresPage = () => {
return (
<figure className="figure">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(73).jpg" className="figure-img img-fluid z-depth-1"
alt="" style={{ width: "400px" }} />
<figcaption className="figure-caption text-right">
A caption for the above image.
</figcaption>
</figure>
);
}
export default FiguresPage;