Table color variants in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What color will the table row have?

Given the following Bootstrap table code, what color will the second row have when rendered in a browser?

Bootsrap

<table class="table">
  <tbody>
    <tr class="table-primary">
      <td>Row 1</td>
    </tr>
    <tr class="table-success">
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

A The second row will have a green background color.

B The second row will have a blue background color.

C The second row will have a red background color.

D The second row will have no background color.

💡 Hint

Bootstrap uses specific classes like table-success for green backgrounds.

The class 'table-success' applies a green background color to the table row in Bootstrap.

❓ selector

intermediate

Which class applies a red background to a table row?

In Bootstrap, which class should you add to a table row to make its background red?

A table-info

B table-warning

C table-danger

D table-primary

💡 Hint

Think about the meaning of 'danger' in color coding.

The 'table-danger' class in Bootstrap applies a red background to table rows or cells.

🧠 Conceptual

advanced

What is the effect of the class 'table-striped' on a Bootstrap table?

What visual effect does adding the class 'table-striped' have on a Bootstrap table?

A It adds a border around the entire table.

B It adds alternating background colors to the table rows.

C It changes the font color of the table header.

D It makes the table rows clickable.

💡 Hint

Striped means lines or bands of color.

The 'table-striped' class adds alternating background colors to odd table rows for better readability.

❓ accessibility

advanced

How to improve accessibility for colored table rows?

When using Bootstrap table color variants like 'table-success' or 'table-danger', what should you do to ensure good accessibility?

A Ensure sufficient color contrast and add ARIA labels if needed.

B Only use colors without any text content.

C Use inline styles instead of Bootstrap classes.

D Avoid using any colors on table rows.

💡 Hint

Think about users who might not see colors well.

Good accessibility means colors must have enough contrast and ARIA labels help screen readers understand the meaning.

📝 Syntax

expert

What error occurs with this Bootstrap table class usage?

What happens if you write this HTML code for a Bootstrap table row?

Row 1

Bootsrap

<table class="table">
  <tbody>
    <tr class="table-success table-danger">
      <td>Row 1</td>
    </tr>
  </tbody>
</table>

A The browser will show a syntax error and not render the table.

B The row background color will be green because table-success overrides table-danger.

C The row will have no background color because the classes conflict.

D The row background color will be red because table-danger overrides table-success.

💡 Hint

CSS classes applied later or with higher specificity override earlier ones.

When multiple Bootstrap color classes are applied, the last one in the CSS order usually takes precedence, so 'table-danger' (red) overrides 'table-success' (green).

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