Bootstrap | figure class with Examples

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> 
    <!-- Including Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
    <title>Figures in Bootstrap</title> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>Figures in Bootstrap</h1> 
        <figure class="figure"> 
            <img class="figure-img" src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" > 
        </figure> 
</body> 
</html>                     

Output:
figure without caption

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> 
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
      
    <title>Figures in Bootstrap</title> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>Figures in Bootstrap</h1> 
          
        <figure class="figure"> 
            <img class="figure-img" src= "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" > 
              
            <figcaption class="figure-caption"> 
                Caption for the above image. 
            </figcaption> 
        </figure> 
</body> 
</html>                     

Output:
figure with caption

Reference: https://getbootstrap.com/docs/4.0/content/figures/

My Personal Notes

Recommended Posts: