Bootsrapmarkup~30 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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 -->

Need a hint?

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

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

Need a hint?

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