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).