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.