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" > </ 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 > <!-- 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:
Reference: https://getbootstrap.com/docs/4.0/content/figures/
Please Login to comment...