Bootsrapmarkup~30 mins

Responsive tables in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Responsive Tables with Bootstrap

📖 Scenario: You are building a webpage to display a list of products and their prices. The table should look good on all devices, including phones and tablets.

🎯 Goal: Create a responsive table using Bootstrap that adjusts nicely on smaller screens by allowing horizontal scrolling.

📋 What You'll Learn

Use Bootstrap 5 classes for styling and responsiveness

Create a table with headers: Product, Category, Price

Make the table horizontally scrollable on small screens

Use semantic HTML elements

Ensure accessibility with proper table markup

💡 Why This Matters

🌍 Real World

Responsive tables are essential for displaying data clearly on all devices, especially on mobile phones where screen width is limited.

💼 Career

Web developers often need to create tables that look good and work well on any screen size. Knowing how to use Bootstrap's responsive table features is a valuable skill.

Progress0 / 4 steps

Create the basic HTML table structure

Write the HTML code to create a <table> with the headers Product, Category, and Price. Add three rows with these exact entries:
Apple, Fruit, $1
Carrot, Vegetable, $0.5
Milk, Dairy, $2.
Use semantic tags <table>, <thead>, <tbody>, <tr>, <th>, and <td>.

Bootsrap

Need a hint?

Use <table> with <thead> for headers and <tbody> for rows. Add three rows with the exact data.

Add Bootstrap classes for styling

Add the Bootstrap classes table and table-striped to the <table> element to style it with stripes and default Bootstrap table styles.

Bootsrap


  
  
    
      Product
      Category
      Price
    
  
  
    
      Apple
      Fruit
      $1
    
    
      Carrot
      Vegetable
      $0.5
    
    
      Milk
      Dairy
      $2

Need a hint?

Add the classes inside the <table> tag like class="table table-striped".

Make the table responsive

Wrap the <table> element inside a <div> with the Bootstrap class table-responsive to make the table horizontally scrollable on small screens.

Bootsrap



  
    
      
        Product
        Category
        Price
      
    
    
      
        Apple
        Fruit
        $1
      
      
        Carrot
        Vegetable
        $0.5
      
      
        Milk
        Dairy
        $2

Need a hint?

Wrap the entire <table> block inside a <div> with class table-responsive.

Add Bootstrap CSS link and viewport meta for responsiveness

Add the Bootstrap 5 CSS CDN link inside the <head> section and add the viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> to ensure proper scaling on mobile devices. Wrap the responsive table inside a <main> tag for semantic structure.

Bootsrap




  
  
  
  Responsive Table

Need a hint?

Include the viewport meta tag and Bootstrap CSS link inside <head>. Wrap the table inside <main> in the <body>.