Table color variants in Bootsrap - Browser Rendering Trace

Render Flow - Table color variants

Load HTML table element

↓

Apply Bootstrap base table styles

↓

Add color variant class (e.g., .table-primary)

↓

Override background and text colors

↓

Render colored table rows

↓

Paint final colored table

The browser reads the table HTML, applies Bootstrap's base styles, then applies the color variant classes which change background and text colors of rows or cells, finally rendering the colored table visually.

Render Steps - 3 Steps

Code Added:<table class="table">

Before

No table visible

→

After

[ TABLE ]
  [ Header Row ]
  [ Data Row 1 ]
  [ Data Row 2 ]

Adding the base Bootstrap table class styles the table with borders, padding, and basic layout.

🔧 Browser Action:Creates table layout, applies base CSS styles

Code Sample

A striped Bootstrap table with a primary color variant that colors the background of all rows in a blue shade.

Bootsrap

<table class="table table-striped table-primary">
  <thead>
    <tr><th>#</th><th>Name</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Alice</td><td>Active</td></tr>
    <tr><td>2</td><td>Bob</td><td>Inactive</td></tr>
  </tbody>
</table>

Render Quiz - 3 Questions

After applying step 2 (table-striped), what visual change do you see?

A Alternating row background colors

B Table borders disappear

C Text becomes bold

D Table width shrinks

Common Confusions - 2 Topics

Why doesn't the entire row change color when I add a color variant?

Bootstrap color variants like table-primary only color the background of striped rows or specific cells, not the entire table by default. You need to apply the class to the table or rows correctly.

💡 Apply color variant classes to the <table> or <tr> elements to see full row color changes (see render_steps 3).

Why do some rows stay white even with a color variant?

The striped class colors only odd or even rows, so the other rows keep the default background. Color variants apply on top of this pattern.

💡 Striped tables alternate row colors; color variants affect only those colored rows (see render_steps 2 and 3).

Property Reference

Class	Effect on Table	Visual Change	Common Use
table	Base table styling	Borders, padding, layout	Basic table structure
table-striped	Adds striped rows	Alternating row backgrounds	Improves row readability
table-primary	Colors rows with primary theme	Blue background on rows	Highlight important rows
table-success	Colors rows with success theme	Green background on rows	Indicate success or positive status
table-danger	Colors rows with danger theme	Red background on rows	Indicate errors or warnings
table-warning	Colors rows with warning theme	Yellow background on rows	Indicate caution or alerts
table-info	Colors rows with info theme	Light blue background on rows	Provide informational highlight

Concept Snapshot

Bootstrap table color variants use classes like table-primary to change row backgrounds. The base .table class adds structure and borders. .table-striped adds alternating row colors for readability. Color variants override these backgrounds with theme colors. Apply classes to <table> or <tr> for desired effect. Useful for highlighting status or categories visually.

Practice

1. Which Bootstrap class would you use to add a green background color to a table row to indicate success?

easy

A. table-success

B. table-danger

C. table-warning

D. table-info

Solution

1. Step 1: Understand Bootstrap color classes

   Bootstrap uses specific classes to color table rows, such as table-success for green, table-danger for red, table-warning for yellow, and table-info for blue.

2. Step 2: Match color to meaning

   Green color indicates success, so the correct class is table-success.

3. Final Answer:

   table-success -> Option A

4. Quick Check:

   Green background = table-success [OK]

Hint: Green means success, so use table-success class [OK]

Common Mistakes:

• Using table-danger for success (red means danger)
• Confusing table-warning with success
• Applying class to <table> instead of <tr> or <td>

2. Which of the following is the correct way to apply a red background color to a single table cell using Bootstrap?

easy

A. <td class='danger'>Data</td>

B. <tr class='table-danger'><td>Data</td></tr>

C. <td class='bg-danger'>Data</td>

D. <td class='table-danger'>Data</td>

Solution

1. Step 1: Identify correct Bootstrap class for table cell color

   Bootstrap uses table-danger to color table rows red. To color a single cell, the recommended class is bg-danger which applies a red background color to any element.

2. Step 2: Apply class to the correct element

   To color a single cell, add class='bg-danger' directly to the <td> element.

3. Final Answer:

   <td class='bg-danger'>Data</td> -> Option C

4. Quick Check:

   Red cell = td with bg-danger [OK]

Hint: Use bg-danger on <td> for red cell background [OK]

Common Mistakes:

• Using class 'danger' without 'table-' prefix
• Applying class to <tr> when only one cell should be colored
• Using table-danger which is for rows, not cells

3. What will be the background color of the second row in this table?

<table class='table'>
  <tr><td>Row 1</td></tr>
  <tr class='table-warning'><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>

medium

A. Yellow background

B. Green background

C. Red background

D. No background color

Solution

1. Step 1: Identify the class on the second row

   The second <tr> has the class table-warning.

2. Step 2: Understand Bootstrap color meaning

   table-warning adds a yellow background color to the row.

3. Final Answer:

   Yellow background -> Option A

4. Quick Check:

   table-warning = yellow background [OK]

Hint: table-warning means yellow background color [OK]

Common Mistakes:

• Confusing table-warning with table-success
• Thinking no color applies without explicit style
• Mixing up row and cell classes

4. Identify the error in this code snippet that tries to color a table row red:

<tr class='danger'>
  <td>Error Row</td>
</tr>

medium

A. Class name should be 'bg-danger' for table rows

B. Class should be 'table-danger' instead of 'danger'

C. Class should be applied to <td> not <tr>

D. No error, code is correct

Solution

1. Step 1: Check Bootstrap class naming for table rows

   Bootstrap requires the prefix table- for table color variants, so danger alone is invalid.

2. Step 2: Correct the class name

   The correct class to color a row red is table-danger.

3. Final Answer:

   Class should be 'table-danger' instead of 'danger' -> Option B

4. Quick Check:

   Table row red = table-danger class [OK]

Hint: Table color classes always start with 'table-' prefix [OK]

Common Mistakes:

• Using 'danger' without 'table-' prefix
• Applying class to <td> when <tr> is intended
• Using 'bg-danger' which is for general backgrounds

5. You want to highlight only the first and last cells of a table row with different colors using Bootstrap. Which code snippet correctly applies a green background to the first cell and a blue background to the last cell?

hard

A. <tr class='table-success'><td>First</td><td>Middle</td><td class='table-info'>Last</td></tr>

B. <tr class='table-success table-info'><td>First</td><td>Middle</td><td>Last</td></tr>

C. <tr><td class='bg-success'>First</td><td>Middle</td><td class='bg-info'>Last</td></tr>

D. <tr><td class='table-success'>First</td><td>Middle</td><td class='table-info'>Last</td></tr>

Solution

1. Step 1: Apply color classes to individual cells

   To color only specific cells, add table-success and table-info classes directly to the <td> elements.

2. Step 2: Avoid applying multiple classes to the row

   Applying multiple color classes to the <tr> will override or conflict, so color should be on cells.

3. Step 3: Use Bootstrap table color classes, not bg- classes for table variants

   Use table-success and table-info for table color variants, not bg-success or bg-info.

4. Final Answer:

   <tr><td class='table-success'>First</td><td>Middle</td><td class='table-info'>Last</td></tr> -> Option D

5. Quick Check:

   Color cells individually with table-success/info classes [OK]

Hint: Add table-success/info classes to individual <td> cells [OK]

Common Mistakes:

• Applying multiple color classes to <tr> causing conflicts
• Using bg-success/bg-info instead of table-success/table-info
• Coloring entire row instead of specific cells