Bootstrap 5 Figures
A Bootstrap5 Figures is a component that provides a way to display a piece of content along with an image. If we want to show the image with an optional component, the figure class in Bootstrap 5 is used.
Bootstrap 5 Figures Classes:
- figure: used to display content, like any image with an optional caption.
- figure-caption: used to give styles to the caption figure.
- img-fluid: used to make an image responsive.
Syntax:
<figure class="figure"> <img src="..." class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption">...</figcaption> </figure>
Example 1: In this example, we are going to see how to display images and text with the figure component in Bootstrap with a caption at the left bottom of the image.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body > < div class = "container pt-4" > < div > < h3 class = "text-success" > GeekforBeginner </ h3 > < h5 >Bootstrap 5 Figures</ h5 > </ div > < div class = "middle" > < figure class = "figure" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" class = "figure-img img-fluid" alt = "Image failed to load" > < figcaption class = "figure-caption" > Image Caption </ figcaption > </ figure > </ div > </ div > </ body > </ html > |
Output:
Example2:In this example, we are going to see how to display images and text with the figure component in Bootstrap with a caption at the right bottom of the image.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body > < div class = "container pt-4 " > < div class = "header" > < h3 class = "text-success" > GeekforBeginner </ h3 > < h5 >Bootstrap 5 Figures</ h5 > </ div > < div class = "middle" > < figure class = "figure" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" class = "figure-img img-fluid " alt = "Image failed to load" > < figcaption class = "figure-caption text-end" > Image Caption </ figcaption > </ figure > </ div > </ div > </ body > </ html > |
Output:
Reference:https://getbootstrap.com/docs/5.0/content/figures