Figure component in Bootsrap - Browser Rendering Trace

Render Flow - Figure component

[Read <figure>] -> [Create FIGURE container] -> [Read <img>] -> [Create IMG element inside FIGURE] -> [Read <figcaption>] -> [Create FIGCAPTION inside FIGURE] -> [Apply Bootstrap styles] -> [Layout image and caption] -> [Paint] -> [Composite]

The browser reads the figure element and its children, creates the DOM nodes, applies Bootstrap's figure styles, then lays out the image and caption visually stacked with spacing.

Render Steps - 3 Steps

Code Added:<figure class="figure"> element added

Before

[No content]

→

After

[figure]
  [empty space]
[/figure]

The figure element creates a container box for the image and caption.

🔧 Browser Action:Creates FIGURE node in DOM and allocates layout box

Code Sample

This code shows an image with a caption below it, styled with Bootstrap's figure component for spacing, rounded corners, and caption styling.

Bootsrap

<figure class="figure">
  <img src="https://via.placeholder.com/150" class="figure-img img-fluid rounded" alt="Placeholder image">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Bootsrap

.figure {
  display: inline-block;
}
.figure-img {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}
.figure-caption {
  font-size: 0.875rem;
  color: #6c757d;
  margin-top: 0.5rem;
  text-align: center;
}

Render Quiz - 3 Questions

After step 2, how does the image visually appear inside the figure?

A Image is stretched beyond container width

B Image is fixed size with sharp corners

C Image is responsive with rounded corners and fits container width

D Image is hidden

Common Confusions - 3 Topics

Why does the caption not appear directly under the image without spacing?

Bootstrap's .figure-caption class adds margin-top to separate caption from image, so spacing is intentional (see step 3).

💡 Caption always has margin above it for clear separation.

Why doesn't the image stretch beyond the container width?

The .img-fluid class sets max-width to 100% and height auto, so image scales down but never grows larger than container (step 2).

💡 Responsive images stay within container width.

Why does the image have rounded corners but the caption text does not?

The .rounded class applies border-radius only to the image element, not to the caption (step 2).

💡 Rounded corners apply only to images, captions remain normal text.

Property Reference

Class	Applied To	Visual Effect	Common Use
figure	figure element	Creates inline-block container with margin	Wrap image and caption
figure-img	img element	Makes image responsive and rounded corners	Style images inside figure
img-fluid	img element	Sets max-width: 100% and height auto	Make image scale with container
rounded	img element	Adds border-radius for rounded corners	Softens image edges visually
figure-caption	figcaption element	Smaller, muted text below image	Caption description

Concept Snapshot

Bootstrap's Figure component uses <figure> as a container for images and captions. The .figure-img and .img-fluid classes make images responsive and rounded. The .figure-caption class styles captions with smaller, muted text below the image. The figure container uses inline-block display to wrap content neatly. Spacing and alignment come from Bootstrap's predefined classes. This creates a clean, accessible image with caption layout.