Table color variants in Bootsrap - Mini Project: Build & Apply

Bootstrap Table Color Variants

📖 Scenario: You are creating a simple webpage to display a table of fruits with different background colors for each row to make it easy to read and visually appealing.

🎯 Goal: Build a Bootstrap table with color variants applied to each row using Bootstrap's contextual classes.

📋 What You'll Learn

Use a Bootstrap table with the class table

Create a table with a header row containing Fruit and Color

Add four rows with fruits: Apple, Banana, Cherry, and Date

Apply Bootstrap color variant classes table-primary, table-success, table-danger, and table-warning to each row respectively

💡 Why This Matters

🌍 Real World

Tables with color variants help users quickly identify categories or statuses in data, such as highlighting important rows in reports or dashboards.

💼 Career

Knowing how to use Bootstrap's table classes is useful for front-end developers building user-friendly, accessible, and visually clear data tables in websites and web apps.

1

Create the basic Bootstrap table structure

Write the HTML code to create a Bootstrap table with the class table. Inside the table, add a thead with a single row containing two headers: Fruit and Color. Then add an empty tbody where the fruit rows will go.

Bootsrap

  
    
      Fruit
      Color
    
  
  
    
  

Hint

Remember to use the table class on the <table> tag and create header cells with <th>.

2

Add fruit rows inside the table body

Inside the tbody, add four rows (<tr>) for the fruits: Apple, Banana, Cherry, and Date. Each row should have two cells (<td>): the fruit name and its color as text (e.g., Red for Apple).

Bootsrap

  
    
      Fruit
      Color
    
  
  
    
  

Hint

Use <tr> for each row and <td> for each cell inside the row.

3

Add Bootstrap color variant classes to each row

Add the Bootstrap color variant classes to each fruit row as follows: add table-primary to the Apple row, table-success to the Banana row, table-danger to the Cherry row, and table-warning to the Date row. These classes should be added to the <tr> tags.

Bootsrap

  
    
      Fruit
      Color
    
  
  
     here -->
  

Hint

Add the color variant classes inside the class attribute of each <tr> tag.

4

Add Bootstrap CSS link and complete the HTML document

Wrap the table inside a complete HTML5 document. Add the <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8"> and viewport meta tag. Include the Bootstrap 5 CSS CDN link inside the <head>. Place the table inside the <body> tag.

Bootsrap

Hint

Make sure to include the Bootstrap CSS link in the <head> and wrap your table inside <body>.

Practice

1. Which Bootstrap class would you use to add a green background color to a table row to indicate success?

easy

A. table-success

B. table-danger

C. table-warning

D. table-info

Solution

1. Step 1: Understand Bootstrap color classes

   Bootstrap uses specific classes to color table rows, such as table-success for green, table-danger for red, table-warning for yellow, and table-info for blue.

2. Step 2: Match color to meaning

   Green color indicates success, so the correct class is table-success.

3. Final Answer:

   table-success -> Option A

4. Quick Check:

   Green background = table-success [OK]

Hint: Green means success, so use table-success class [OK]

Common Mistakes:

• Using table-danger for success (red means danger)
• Confusing table-warning with success
• Applying class to <table> instead of <tr> or <td>

2. Which of the following is the correct way to apply a red background color to a single table cell using Bootstrap?

easy

A. <td class='danger'>Data</td>

B. <tr class='table-danger'><td>Data</td></tr>

C. <td class='bg-danger'>Data</td>

D. <td class='table-danger'>Data</td>

Solution

1. Step 1: Identify correct Bootstrap class for table cell color

   Bootstrap uses table-danger to color table rows red. To color a single cell, the recommended class is bg-danger which applies a red background color to any element.

2. Step 2: Apply class to the correct element

   To color a single cell, add class='bg-danger' directly to the <td> element.

3. Final Answer:

   <td class='bg-danger'>Data</td> -> Option C

4. Quick Check:

   Red cell = td with bg-danger [OK]

Hint: Use bg-danger on <td> for red cell background [OK]

Common Mistakes:

• Using class 'danger' without 'table-' prefix
• Applying class to <tr> when only one cell should be colored
• Using table-danger which is for rows, not cells

3. What will be the background color of the second row in this table?

<table class='table'>
  <tr><td>Row 1</td></tr>
  <tr class='table-warning'><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>

medium

A. Yellow background

B. Green background

C. Red background

D. No background color

Solution

1. Step 1: Identify the class on the second row

   The second <tr> has the class table-warning.

2. Step 2: Understand Bootstrap color meaning

   table-warning adds a yellow background color to the row.

3. Final Answer:

   Yellow background -> Option A

4. Quick Check:

   table-warning = yellow background [OK]

Hint: table-warning means yellow background color [OK]

Common Mistakes:

• Confusing table-warning with table-success
• Thinking no color applies without explicit style
• Mixing up row and cell classes

4. Identify the error in this code snippet that tries to color a table row red:

<tr class='danger'>
  <td>Error Row</td>
</tr>

medium

A. Class name should be 'bg-danger' for table rows

B. Class should be 'table-danger' instead of 'danger'

C. Class should be applied to <td> not <tr>

D. No error, code is correct

Solution

1. Step 1: Check Bootstrap class naming for table rows

   Bootstrap requires the prefix table- for table color variants, so danger alone is invalid.

2. Step 2: Correct the class name

   The correct class to color a row red is table-danger.

3. Final Answer:

   Class should be 'table-danger' instead of 'danger' -> Option B

4. Quick Check:

   Table row red = table-danger class [OK]

Hint: Table color classes always start with 'table-' prefix [OK]

Common Mistakes:

• Using 'danger' without 'table-' prefix
• Applying class to <td> when <tr> is intended
• Using 'bg-danger' which is for general backgrounds

5. You want to highlight only the first and last cells of a table row with different colors using Bootstrap. Which code snippet correctly applies a green background to the first cell and a blue background to the last cell?

hard

A. <tr class='table-success'><td>First</td><td>Middle</td><td class='table-info'>Last</td></tr>

B. <tr class='table-success table-info'><td>First</td><td>Middle</td><td>Last</td></tr>

C. <tr><td class='bg-success'>First</td><td>Middle</td><td class='bg-info'>Last</td></tr>

D. <tr><td class='table-success'>First</td><td>Middle</td><td class='table-info'>Last</td></tr>

Solution

1. Step 1: Apply color classes to individual cells

   To color only specific cells, add table-success and table-info classes directly to the <td> elements.

2. Step 2: Avoid applying multiple classes to the row

   Applying multiple color classes to the <tr> will override or conflict, so color should be on cells.

3. Step 3: Use Bootstrap table color classes, not bg- classes for table variants

   Use table-success and table-info for table color variants, not bg-success or bg-info.

4. Final Answer:

   <tr><td class='table-success'>First</td><td>Middle</td><td class='table-info'>Last</td></tr> -> Option D

5. Quick Check:

   Color cells individually with table-success/info classes [OK]

Hint: Add table-success/info classes to individual <td> cells [OK]

Common Mistakes:

• Applying multiple color classes to <tr> causing conflicts
• Using bg-success/bg-info instead of table-success/table-info
• Coloring entire row instead of specific cells