Why structured data needs styling in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add Bootstrap styling to a table.

Bootsrap

<table class="table [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-striped

Bcontainer

Crow

Dbtn-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using container or row which are for layout, not table styling.

Using button classes like btn-primary on tables.

The table-striped class adds alternating row colors to the table, making the data easier to read and visually appealing.

2fill in blank

medium

Complete the code to make the table responsive with Bootstrap.

Bootsrap

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

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

Atable-bordered

Bcontainer

Crow

Dtable-responsive

Attempts:

3 left

💡 Hint

Common Mistakes

Using container or row which are for layout, not responsiveness.

Adding table-bordered which adds borders but not responsiveness.

The table-responsive class wraps the table to make it scroll horizontally on small screens, improving usability.

3fill in blank

hard

Fix the error in the code to correctly style the table header with Bootstrap.

Bootsrap

<thead class="[1]">
  <tr>
    <th>City</th>
    <th>Country</th>
  </tr>
</thead>

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

Atable-header

Bthead-dark

Cthead-light

Dheader-style

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent classes like table-header or header-style.

Confusing thead-dark with thead-light.

The correct Bootstrap class for a light styled table header is thead-light. thead-dark is for dark headers. Other options are not valid Bootstrap classes.

4fill in blank

hard

Fill both blanks to add Bootstrap classes for a striped and bordered 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-striped

Btable-hover

Ctable-bordered

Dtable-sm

Attempts:

3 left

💡 Hint

Common Mistakes

Using table-hover which adds hover effect but not stripes or borders.

Using table-sm which changes size, not borders or stripes.

table-striped adds alternating row colors, and table-bordered adds borders around cells, improving readability and structure.

5fill in blank

hard

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

Bootsrap

<div class="[1]">
  <table class="table [2] [3]">
    <thead>
      <tr><th>Language</th><th>Level</th></tr>
    </thead>
    <tbody>
      <tr><td>JavaScript</td><td>Advanced</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

Using container instead of table-responsive for responsiveness.

Mixing up table-hover and table-bordered.

table-responsive makes the table scroll on small screens, table-striped adds row stripes, and table-hover highlights rows on mouse hover, improving usability and style.