This chapter discusses about the figure component of Bootstrap. Consider utilizing the <figure> element whenever you have a need to exhibit content, such as an image that may be accompanied by an optional caption.
- <figure> element is used to markup a photo or an image in a document and <figcaption> is used to define a caption to that photo.
- The .figure class is used to create a responsive container for images, videos, or other media objects.
- It provides a way to wrap media content along with optional captions and other related elements.
- The classes .figure, .figure-img and .figure-caption provide baseline styles for the <figure> and <figcaption>.
- Use .img-fluid class to your <img>, in order to make it responsive; as the images in figures have no explicit size.
Let us see an example of .figure class
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Figures</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><h4>Figures</h4><br><figure class="figure"><img src="/bootstrap/images/scenery.jpg" class="figure-img img-fluid rounded" alt="Image in Figure"><figcaption class="figure-caption">A caption for the responsive image.</figcaption></figure></body></html>
The alignment of the caption can be changed using the text utilities, such as .text-start, .text-center or .text-end.
Let us see an example for changing the alignment of caption
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Figures</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><h4>Figure caption alignment</h4><br><figure class="figure"><img src="/bootstrap/images/tutimg.png" class="figure-img img-fluid rounded" alt="Image in Figure"><figcaption class="figure-caption text-center">Responsive image</figcaption></figure></body></html>
Print Page
Leave a Reply