Table caption placement in Bootsrap - Browser Rendering Trace

Render Flow - Table caption placement

Read <table>

→Create TABLE node

↓

Read <caption>

→Create CAPTION node as first child

↓

Read <thead>, <tbody>, <tfoot>

→Create respective section nodes

↓

Apply Bootstrap styles

↓

Calculate caption placement

↓

Layout table and caption

↓

Paint and Composite

The browser reads the table and its caption element first, placing the caption above the table by default. Bootstrap styles can adjust caption placement visually by CSS, affecting layout and painting.

Render Steps - 3 Steps

Code Added:<caption>Monthly Sales Report</caption> inside <table>

Before

[TABLE]
  [THEAD]
    [TR][TH Month][TH Sales]
  [TBODY]
    [TR][TD January][TD $1000]

→

After

[CAPTION: Monthly Sales Report]
[TABLE]
  [THEAD]
    [TR][TH Month][TH Sales]
  [TBODY]
    [TR][TD January][TD $1000]

Adding the caption element places a text label above the table by default.

🔧 Browser Action:Creates caption box and inserts it before table content

Code Sample

A Bootstrap styled table with a caption placed below the table, centered and bold.

Bootsrap

<table class="table">
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr><th>Month</th><th>Sales</th></tr>
  </thead>
  <tbody>
    <tr><td>January</td><td>$1000</td></tr>
  </tbody>
</table>

Bootsrap

.table caption {
  caption-side: bottom;
  text-align: center;
  font-weight: 600;
  padding-top: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 2, where is the caption placed relative to the table?

A Below the table

B Above the table

C Inside the first table cell

D Hidden from view

Common Confusions - 2 Topics

Why does my caption stay above the table even after setting caption-side: bottom?

Some browsers or Bootstrap versions may override caption-side with other styles or specificity. Check if your CSS is loaded correctly and not overridden.

💡 Always verify CSS specificity and use browser DevTools to confirm caption-side is applied (see render_steps 2).

Why is my caption text not centered even though I set text-align: center?

The caption element is a block-level box by default, so text-align centers inline text inside it. If other styles override text alignment, it won't center.

💡 Use DevTools to inspect computed styles and confirm text-align on caption (see render_steps 3).

Property Reference

Property	Value Applied	Visual Effect	Common Use
caption-side	top	Caption appears above the table	Default caption placement
caption-side	bottom	Caption appears below the table	Place caption under table
text-align	center	Centers caption text horizontally	Improve caption readability
padding-top	0.5rem	Adds space above caption when below table	Separate caption from table visually
font-weight	600	Makes caption text bold	Highlight caption

Concept Snapshot

Table captions label tables visually. Default placement is above the table (caption-side: top). Use caption-side: bottom to place caption below. Center caption text with text-align: center. Add padding to separate caption from table. Bootstrap styles enhance caption appearance.

Practice

1. Where should the <caption> tag be placed in a Bootstrap table to add a descriptive title?

easy

A. Inside the <tbody> element

B. Outside the <table> element, above the table

C. Directly inside the <table> element, before any <thead> or <tbody>

D. After the closing </table> tag

Solution

1. Step 1: Understand the HTML structure for tables and correct placement

   The <caption> tag must be inside the <table> element to be valid and recognized by browsers. It should come immediately after the opening <table> tag, before <thead> or <tbody>.

2. Final Answer:

   Directly inside the <table> element, before any <thead> or <tbody> -> Option C

3. Quick Check:

   Caption tag inside table = Directly inside the <table> element, before any <thead> or <tbody> [OK]

Hint: Caption must be inside table tag, right after opening [OK]

Common Mistakes:

• Placing caption outside the table
• Putting caption inside tbody
• Adding caption after closing table tag

2. Which Bootstrap class correctly places a table caption below the table?

easy

A. .caption-top

B. .caption-bottom

C. .caption-right

D. .caption-left

Solution

1. Step 1: Recall Bootstrap caption placement classes and identify for bottom placement

   Bootstrap provides .caption-top to place captions above and .caption-bottom to place captions below the table. The class .caption-bottom moves the caption below the table.

2. Final Answer:

   .caption-bottom -> Option B

3. Quick Check:

   Caption below table = .caption-bottom [OK]

Hint: Use .caption-bottom class to move caption below [OK]

Common Mistakes:

• Using .caption-top for bottom placement
• Using non-existent classes like .caption-right
• Not adding any class for placement

3. What will be the visual position of the caption in this Bootstrap table code?

<table class="table">
  <caption class="caption-top">Monthly Sales</caption>
  <thead>
    <tr><th>Product</th><th>Sales</th></tr>
  </thead>
  <tbody>
    <tr><td>Apples</td><td>100</td></tr>
  </tbody>
</table>

medium

A. Caption is hidden and not visible

B. Caption appears below the table

C. Caption appears inside the first cell

D. Caption appears above the table

Solution

1. Step 1: Check the caption class and Bootstrap placement behavior

   The caption has the class caption-top, which Bootstrap uses to place captions above the table. With caption-top, the caption text "Monthly Sales" will appear visually above the table rows and headers.

2. Final Answer:

   Caption appears above the table -> Option D

3. Quick Check:

   caption-top class = caption above table [OK]

Hint: caption-top means caption above table [OK]

Common Mistakes:

• Confusing caption-top with caption-bottom
• Thinking caption goes inside table cells
• Assuming caption is hidden without class

4. Identify the error in this Bootstrap table caption code:

<table class="table">
  <thead>
    <caption>User Data</caption>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>30</td></tr>
  </tbody>
</table>

medium

A. Caption tag is incorrectly placed inside the thead element

B. Missing Bootstrap class on caption

C. Table tag is missing a closing tag

D. Caption text should be inside tbody

Solution

1. Step 1: Check caption placement rules and identify error

   The <caption> tag must be a direct child of the <table> element, not inside <thead> or <tbody>. The caption is placed inside <thead>, which is invalid HTML and will cause rendering issues.

2. Final Answer:

   Caption tag is incorrectly placed inside the thead element -> Option A

3. Quick Check:

   Caption must be direct child of table, not inside thead [OK]

Hint: Caption must be direct child of table, not inside thead [OK]

Common Mistakes:

• Placing caption inside thead or tbody
• Forgetting to close table tag
• Assuming caption needs Bootstrap class

5. You want a Bootstrap table caption to appear below the table on small screens but above the table on larger screens. Which approach is best?

hard

A. Place two captions, one with .caption-top and one with .caption-bottom, then hide/show with responsive utilities

B. Use <caption class="caption-top caption-bottom"> and rely on Bootstrap to toggle automatically

C. Use only .caption-top and rely on CSS media queries to move it below

D. Place caption outside the table and use JavaScript to reposition it

Solution

1. Step 1: Understand Bootstrap limitations and best responsive approach

   Bootstrap's .caption-top and .caption-bottom classes do not toggle automatically based on screen size. Place two captions with different classes and use Bootstrap's responsive display classes (like d-none d-sm-block) to show one above on large screens and below on small screens.

2. Final Answer:

   Place two captions, one with .caption-top and one with .caption-bottom, then hide/show with responsive utilities -> Option A

3. Quick Check:

   Use two captions + responsive classes for placement [OK]

Hint: Use two captions with responsive show/hide classes [OK]

Common Mistakes:

• Using both classes on one caption expecting toggle
• Trying to move caption with CSS only
• Placing caption outside table and using JS unnecessarily