Table color variants in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Bootstrap class that makes the table striped.

Bootsrap

<table class="table [1]">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
</table>

Drag options to blanks, or click blank then click option'

Atable-sm

Btable-bordered

Ctable-striped

Dtable-hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using table-bordered instead of table-striped.

Forgetting to include the base table class.

The class table-striped adds zebra-striping to the table rows for better readability.

2fill in blank

medium

Complete the code to add a Bootstrap class that highlights rows on hover.

Bootsrap

<table class="table [1]">
  <tr><td>Hover me</td></tr>
  <tr><td>Hover me too</td></tr>
</table>

Drag options to blanks, or click blank then click option'

Atable-striped

Btable-active

Ctable-bordered

Dtable-hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using table-striped which adds stripes but no hover effect.

Using table-active which is for active rows, not hover.

The class table-hover adds a hover effect to table rows to highlight them when the mouse is over.

3fill in blank

hard

Fix the error in the code to apply a Bootstrap color variant to the table rows.

Bootsrap

<table class="table">
  <tr class="[1]">
    <td>Important row</td>
  </tr>
</table>

Drag options to blanks, or click blank then click option'

Atable-primary

Bprimary

Ctable-active

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using primary without the table- prefix.

Using active which does not provide a color variant like primary.

To color a table row, use the contextual class table-primary. The plain primary class is not specific to tables.

4fill in blank

hard

Fill both blanks to create a table with borders and small size using Bootstrap classes.

Bootsrap

<table class="table [1] [2]">
  <tr><td>Cell 1</td><td>Cell 2</td></tr>
</table>

Drag options to blanks, or click blank then click option'

Atable-bordered

Btable-striped

Ctable-sm

Dtable-hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using table-striped instead of table-bordered for borders.

Confusing table-hover with table-sm.

The class table-bordered adds borders around cells, and table-sm makes the table smaller with less padding.

5fill in blank

hard

Fill all three blanks to create a striped, bordered table with hover effect using Bootstrap classes.

Bootsrap

<table class="table [1] [2] [3]">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
</table>

Drag options to blanks, or click blank then click option'

Atable-sm

Btable-hover

Ctable-bordered

Dtable-striped

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up table-sm with other style classes.

Forgetting to include the base table class.

Use table-striped for stripes, table-bordered for borders, and table-hover for hover effect on rows.

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