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.

Practice

1. What is the main purpose of wrapping a table inside a div with the class table-responsive in Bootstrap?

easy

A. To center the table on the page

B. To add borders around the table cells

C. To change the table background color

D. To make the table horizontally scrollable on small screens

Solution

1. Step 1: Understand the role of table-responsive

   The table-responsive class wraps the table and adds horizontal scrolling on smaller screens.

2. Step 2: Compare with other options

   Adding borders or changing background color is done with other classes like table-bordered or CSS, not table-responsive.

3. Final Answer:

   To make the table horizontally scrollable on small screens -> Option D

4. Quick Check:

   Responsive tables scroll horizontally on small screens [OK]

Hint: Remember: table-responsive enables horizontal scroll [OK]

Common Mistakes:

• Confusing table-responsive with styling classes
• Thinking it centers the table
• Assuming it changes colors

2. Which of the following is the correct way to make a Bootstrap table responsive?

easy

A. <div class='table-responsive'><table class='table'>...</table></div>

B. <table class='table-responsive table'>...</table>

C. <div class='responsive-table'><table class='table'>...</table></div>

D. <table class='table' responsive>...</table>

Solution

1. Step 1: Recall Bootstrap responsive table syntax

   Bootstrap requires wrapping the <table> inside a <div> with class table-responsive.

2. Step 2: Check each option

   <div class='table-responsive'><table class='table'>...</table></div> correctly wraps the table inside div.table-responsive. The other options use incorrect class names or attributes.

3. Final Answer:

   <div class='table-responsive'><table class='table'>...</table></div> -> Option A

4. Quick Check:

   Wrap table in div.table-responsive [OK]

Hint: Wrap tables in div.table-responsive for responsiveness [OK]

Common Mistakes:

• Adding table-responsive directly to table
• Using wrong class names like responsive-table
• Using attributes instead of classes

3. What will happen when the following code is viewed on a small mobile screen?

<div class='table-responsive'>
  <table class='table table-striped'>
    <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>
</div>

medium

A. The table columns will stack vertically automatically

B. The table will scroll horizontally if it doesn't fit the screen

C. The table will be hidden on small screens

D. The table will overflow outside the screen without scroll

Solution

1. Step 1: Understand table-responsive behavior

   The table-responsive wrapper adds horizontal scrolling on small screens if the table is wider than the viewport.

2. Step 2: Analyze other options

   The table columns do not stack vertically automatically (that requires other techniques). The table is not hidden, and it won't overflow without scroll because of the wrapper.

3. Final Answer:

   The table will scroll horizontally if it doesn't fit the screen -> Option B

4. Quick Check:

   Responsive tables scroll horizontally on small devices [OK]

Hint: Responsive tables scroll horizontally on small screens [OK]

Common Mistakes:

• Thinking columns stack vertically automatically
• Assuming table hides on small screens
• Ignoring horizontal scroll behavior

4. You wrote this code but the table does not scroll on small screens:

<table class='table table-bordered'>
  <thead>
    <tr><th>Product</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Book</td><td>$10</td></tr>
  </tbody>
</table>

What is the fix?

medium

A. Add inline style overflow-x: scroll; to the table

B. Add class table-responsive directly to the table

C. Wrap the table inside a div with class table-responsive

D. Replace table-bordered with table-responsive

Solution

1. Step 1: Identify missing wrapper

   The table is missing the required div.table-responsive wrapper that enables horizontal scrolling on small screens.

2. Step 2: Evaluate other options

   Adding table-responsive class directly to table or replacing table-bordered is incorrect. Inline styles on table won't work properly for responsiveness.

3. Final Answer:

   Wrap the table inside a div with class table-responsive -> Option C

4. Quick Check:

   Wrap tables in div.table-responsive for scroll [OK]

Hint: Always wrap tables in div.table-responsive for scrolling [OK]

Common Mistakes:

• Adding table-responsive class to table instead of wrapper
• Removing other styling classes
• Using inline styles on table instead of wrapper

5. You want to create a responsive table that has striped rows and borders, but only scrolls horizontally on screens smaller than medium size (less than 768px). Which Bootstrap class should you use to wrap the table?

hard

A. table-responsive-md

B. table-responsive

C. table-responsive-sm

D. table-responsive-lg

Solution

1. Step 1: Understand Bootstrap responsive table breakpoints

   Bootstrap provides responsive wrappers like table-responsive-sm, table-responsive-md, etc., which enable horizontal scrolling below the specified breakpoint.

2. Step 2: Match requirement with class

   To scroll only on screens smaller than medium (less than 768px), use table-responsive-md. This means scrolling activates below the medium breakpoint.

3. Final Answer:

   table-responsive-md -> Option A

4. Quick Check:

   Use table-responsive-md for scroll below medium screens [OK]

Hint: Use breakpoint suffixes like -md for responsive scroll [OK]

Common Mistakes:

• Using table-responsive without breakpoint (scrolls always)
• Confusing breakpoint suffixes
• Using wrong breakpoint class for desired screen size