Bootstrap | figure class with Examples
Last Updated :
15 Jan, 2019
A figure is used when one needs to display a piece of content, generally images with an optional caption. The figure class in Bootstrap is used to add styling to the default figure elements.
- The base .figure class is used to indicate a figure element.
- The .figure-img is used to indicate the image used in the figure element.
- The .figure-caption may be used to display a caption below the figure.
Example: Using the .figure class with a sample image.
<!DOCTYPE html>
< html >
< head >
< title >Figures in Bootstrap</ title >
</ head >
< body >
< div class = "container" >
< h1 >Figures in Bootstrap</ h1 >
< figure class = "figure" >
</ figure >
</ body >
</ html >
|
Output:
Example: Using the .figure-caption class to show a caption below the image. This class is used with the <figcaption> tag.
<!DOCTYPE html>
< html >
< head >
< title >Figures in Bootstrap</ title >
</ head >
< body >
< div class = "container" >
< h1 >Figures in Bootstrap</ h1 >
< figure class = "figure" >
< figcaption class = "figure-caption" >
Caption for the above image.
</ figcaption >
</ figure >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/4.0/content/figures/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...