Open In App
Related Articles

Bootstrap | figure class with Examples

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report
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 -->
    <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 -->
      
    <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/

Last Updated : 15 Jan, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads