Striped and hover tables in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add Bootstrap's striped style to the table.

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-bordered

Btable-hover

Ctable-striped

Dtable-responsive

Attempts:

3 left

💡 Hint

Common Mistakes

Using table-hover instead of table-striped

Forgetting to add the base class 'table'

Using table-bordered which adds borders, not stripes

Adding table-striped class makes the table rows alternate in background color, creating a striped effect.

2fill in blank

medium

Complete the code to add Bootstrap's hover effect to the table rows.

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-borderless

Btable-striped

Ctable-sm

Dtable-hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using table-striped instead of table-hover

Not including the base 'table' class

Using unrelated classes like table-sm

The table-hover class adds a highlight effect when you move your mouse over table rows.

3fill in blank

hard

Fix the error in the table class to apply both striped and hover styles.

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-hover table-striped

Btable-striped table-hover

Ctable-striped-hover

Dtable hover striped

Attempts:

3 left

💡 Hint

Common Mistakes

Combining classes into one word like table-striped-hover

Using spaces without quotes causing invalid class names

Using incorrect order or missing one class

Bootstrap requires separate classes for striped and hover effects, separated by spaces. The correct order is table-striped table-hover.

4fill in blank

hard

Fill both blanks to create a table with striped rows and hover effect.

Bootsrap

<table class="table [1] [2]">
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>30</td></tr>
    <tr><td>Bob</td><td>25</td></tr>
  </tbody>
</table>

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

Atable-striped

Btable-hover

Ctable-bordered

Dtable-sm

Attempts:

3 left

💡 Hint

Common Mistakes

Using only one of the classes

Mixing up class names

Adding extra unrelated classes

Use table-striped for striped rows and table-hover for hover effect together.

5fill in blank

hard

Fill all three blanks to create a responsive table with striped rows and hover effect.

Bootsrap

<div class="[1]">
  <table class="table [2] [3]">
    <thead>
      <tr><th>Product</th><th>Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Book</td><td>$10</td></tr>
      <tr><td>Pen</td><td>$2</td></tr>
    </tbody>
  </table>
</div>

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

Atable-responsive

Btable-striped

Ctable-hover

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Not wrapping the table in a responsive div

Using container instead of table-responsive

Missing one of the styling classes

The table-responsive class makes the table scroll horizontally on small screens. Combine it with table-striped and table-hover for styling.