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.

Practice

1. What is the main purpose of the Bootstrap figure component?

easy

A. To add buttons below images

B. To create a navigation menu with images

C. To group images and their captions together with proper styling

D. To make images clickable links

Solution

1. Step 1: Understand the figure component role

   The Bootstrap figure component is designed to group an image and its caption in a semantic and styled way.

2. Step 2: Identify correct usage

   It uses classes like figure-img for the image and figure-caption for the caption, ensuring proper layout and responsiveness.

3. Final Answer:

   To group images and their captions together with proper styling -> Option C

4. Quick Check:

   Figure groups image + caption = A [OK]

Hint: Figure groups image and caption together visually [OK]

Common Mistakes:

• Thinking figure creates navigation menus
• Confusing figure with button groups
• Assuming figure makes images clickable

2. Which of the following is the correct way to add a caption inside a Bootstrap figure?

easy

A. <figcaption class='figure-caption'>Caption text</figcaption>

B. <caption class='figure-caption'>Caption text</caption>

C. <div class='figure-caption'>Caption text</div>

D. <span class='figure-caption'>Caption text</span>

Solution

1. Step 1: Identify the semantic tag for captions in figures

   The correct HTML tag for captions inside a figure is <figcaption>.

2. Step 2: Confirm Bootstrap class usage

   Bootstrap uses the class figure-caption on the <figcaption> tag to style captions properly.

3. Final Answer:

   <figcaption class='figure-caption'>Caption text</figcaption> -> Option A

4. Quick Check:

   Use <figcaption> with figure-caption class = D [OK]

Hint: Caption uses <figcaption> with class figure-caption [OK]

Common Mistakes:

• Using <caption> instead of <figcaption>
• Using generic <div> or <span> without semantic meaning
• Omitting the figure-caption class

3. What will be the visual result of this Bootstrap figure code?

<figure class='figure'>
  <img src='flower.jpg' class='figure-img img-fluid rounded' alt='Flower'>
  <figcaption class='figure-caption text-end'>A beautiful flower</figcaption>
</figure>

medium

A. Only the caption text appears, image is hidden

B. An image of a flower with caption centered below, image corners sharp

C. An image of a flower with caption above the image, image corners rounded

D. An image of a flower with a caption aligned to the right below it, image corners rounded

Solution

1. Step 1: Analyze image classes

   The image uses figure-img, img-fluid for responsiveness, and rounded for rounded corners.

2. Step 2: Analyze caption classes

   The caption uses figure-caption and text-end, which aligns the caption text to the right below the image.

3. Final Answer:

   An image of a flower with a caption aligned to the right below it, image corners rounded -> Option D

4. Quick Check:

   Rounded image + right-aligned caption = A [OK]

Hint: Check classes: rounded image + text-end caption = right aligned [OK]

Common Mistakes:

• Assuming caption is centered by default
• Ignoring the rounded class effect
• Thinking caption appears above image

4. Identify the error in this Bootstrap figure code:

<figure>
  <img src='dog.jpg' class='figure-img img-fluid' alt='Dog'>
  <figcaption>A cute dog</figcaption>
</figure>

medium

A. Missing figure-caption class on <figcaption>

B. Missing figure-img class on <img>

C. The alt attribute is missing on the image

D. The figure tag should be replaced with div

Solution

1. Step 1: Check image classes

   The image has figure-img and img-fluid, which is correct for Bootstrap figure images.

2. Step 2: Check caption classes

   The <figcaption> is missing the figure-caption class, which is needed for proper Bootstrap styling.

3. Final Answer:

   Missing figure-caption class on <figcaption> -> Option A

4. Quick Check:

   Caption needs figure-caption class = B [OK]

Hint: Caption must have figure-caption class for styling [OK]

Common Mistakes:

• Forgetting figure-caption class on caption
• Thinking alt attribute is optional
• Replacing semantic figure tag with div

5. You want to create a responsive Bootstrap figure with an image that has a circular shape and a caption centered below it. Which code snippet achieves this correctly?

hard

A. <figure class='figure'>
<img src='profile.jpg' class='figure-img rounded-circle' alt='Profile'>
<figcaption class='figure-caption'>User Profile</figcaption>
</figure>

B. <figure class='figure'>
<img src='profile.jpg' class='figure-img img-fluid rounded-circle' alt='Profile'>
<figcaption class='figure-caption text-center'>User Profile</figcaption>
</figure>

C. <figure>
<img src='profile.jpg' class='img-fluid rounded' alt='Profile'>
<figcaption class='text-center'>User Profile</figcaption>
</figure>

D. <figure class='figure'>
<img src='profile.jpg' class='figure-img img-fluid rounded' alt='Profile'>
<figcaption class='figure-caption text-start'>User Profile</figcaption>
</figure>

Solution

1. Step 1: Ensure figure container and image classes

   The figure uses class figure. The image uses figure-img for styling, img-fluid for responsiveness, and rounded-circle for circular shape.

2. Step 2: Check caption classes for alignment

   The caption uses figure-caption and text-center to center the caption below the image.

3. Final Answer:

   Code snippet with figure, figure-img img-fluid rounded-circle, and figure-caption text-center -> Option B

4. Quick Check:

   Circle image + centered caption + responsive = C [OK]

Hint: Use rounded-circle + img-fluid + figure-caption text-center [OK]

Common Mistakes:

• Omitting img-fluid for responsiveness
• Using rounded instead of rounded-circle for circle shape
• Not centering caption text