Basic table styling in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Bootstrap class that makes the table have basic styling.

Bootsrap

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

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

Atable-bordered

Btable-hover

Ctable

Dtable-striped

Attempts:

3 left

💡 Hint

Common Mistakes

Using classes like table-striped or table-hover without the base table class.

Forgetting to add any class to the table element.

The table class adds basic Bootstrap styling to the table, such as borders and padding.

2fill in blank

medium

Complete the code to add a Bootstrap class that makes the table rows highlight on hover.

Bootsrap

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

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

Atable-hover

Btable-sm

Ctable-striped

Dtable-bordered

Attempts:

3 left

💡 Hint

Common Mistakes

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

Forgetting to include the base table class.

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

3fill in blank

hard

Fix the error by completing the class name to add borders around all table cells.

Bootsrap

<table class="table [1]">
  <thead>
    <tr>
      <th>City</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Paris</td>
      <td>France</td>
    </tr>
  </tbody>
</table>

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

Atable-striped

Btable-bordered

Ctable-hover

Dtable-sm

Attempts:

3 left

💡 Hint

Common Mistakes

Using table-striped which only adds stripes.

Using table-hover which adds hover effect but no borders.

The table-bordered class adds borders around all cells in the table.

4fill in blank

hard

Fill both blanks to create a small, striped Bootstrap table.

Bootsrap

<table class="table [1] [2]">
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Pen</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

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

Atable-sm

Btable-hover

Ctable-striped

Dtable-bordered

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up table-hover with table-striped.

Forgetting to include the base table class.

The table-sm class makes the table smaller with less padding. The table-striped class adds alternating row colors.

5fill in blank

hard

Fill all three blanks to create a responsive, bordered, and hoverable Bootstrap table.

Bootsrap

<div class="[1]">
  <table class="table [2] [3]">
    <thead>
      <tr>
        <th>Country</th>
        <th>Capital</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Japan</td>
        <td>Tokyo</td>
      </tr>
    </tbody>
  </table>
</div>

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

Atable-responsive

Btable-bordered

Ctable-hover

Dtable-striped

Attempts:

3 left

💡 Hint

Common Mistakes

Putting table-responsive on the table instead of the container div.

Mixing up table-striped with table-hover.

The table-responsive class on the container makes the table scroll horizontally on small screens. The table-bordered adds borders, and table-hover adds row highlight on hover.