Responsive tables in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the table responsive using Bootstrap.

Bootsrap

<div class="[1]">
  <table class="table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>
</div>

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

Acontainer

Brow

Ctable-responsive

Dtable-striped

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'container' or 'row' classes instead of 'table-responsive'.

Adding 'table-responsive' directly to the table instead of wrapping it.

Bootstrap makes tables responsive by wrapping them in a div with the class table-responsive. This allows horizontal scrolling on small screens.

2fill in blank

medium

Complete the code to add striped rows to the responsive table.

Bootsrap

<div class="table-responsive">
  <table class="table [1]">
    <thead>
      <tr>
        <th>Item</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>$1</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td>$0.5</td>
      </tr>
    </tbody>
  </table>
</div>

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

Atable-sm

Btable-bordered

Ctable-hover

Dtable-striped

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'table-bordered' which adds borders but no stripes.

Using 'table-hover' which highlights rows on hover.

The table-striped class adds alternating background colors to table rows, making it easier to read.

3fill in blank

hard

Fix the error in the code to make the table responsive on small screens.

Bootsrap

<div class="table-responsive-[1]">
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
</div>

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

Axs

Bsm

Csmall

Dmd

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'small' or 'xs' which are not valid Bootstrap breakpoint suffixes.

Using 'md' which targets medium screens, not small.

Bootstrap uses table-responsive-sm to make tables responsive on small devices and smaller. The suffix 'sm' is the correct breakpoint abbreviation.

4fill in blank

hard

Fill both blanks to create a responsive, bordered table with hover effect.

Bootsrap

<div class="[1]">
  <table class="table [2] table-hover">
    <thead>
      <tr>
        <th>Product</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Book</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>

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

Atable-responsive

Btable-striped

Ctable-bordered

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'container' instead of 'table-responsive' for the div.

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

Wrapping the table in a table-responsive div makes it scrollable on small screens. Adding table-bordered adds borders around cells. The table-hover class adds a highlight on row hover.

5fill in blank

hard

Fill all three blanks to create a small, responsive, striped table with hover effect.

Bootsrap

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

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

Atable-responsive

Btable-striped

Ctable-hover

Dtable-sm

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'table-hover' and 'table-striped'.

Forgetting to wrap the table in a responsive div.

The table-responsive class on the div makes the table scrollable on small screens. The table-striped class adds alternating row colors. The table-hover class adds a highlight on hover. The table-sm class makes the table more compact but is not used here.