Bootsrapmarkup~30 mins

Basic table styling in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Basic Table Styling with Bootstrap

📖 Scenario: You are creating a simple webpage to display a list of fruits and their colors in a neat table. You want to use Bootstrap to make the table look clean and professional.

🎯 Goal: Build a webpage with a Bootstrap styled table showing fruit names and their colors.

📋 What You'll Learn

Use Bootstrap 5 CSS from CDN

Create a table with two columns: Fruit and Color

Add Bootstrap classes to style the table with borders and stripes

Make sure the page uses semantic HTML and is responsive

💡 Why This Matters

🌍 Real World

Tables are common on websites to show data like product lists, schedules, or reports. Using Bootstrap makes tables look good quickly without writing custom CSS.

💼 Career

Knowing how to use Bootstrap for tables is useful for front-end web developers and designers to create professional and responsive layouts efficiently.

Progress0 / 4 steps

Create the basic HTML structure with a table

Create a basic HTML5 page with lang="en", charset="UTF-8", and a viewport meta tag. Inside the <body>, add a <table> element with a thead containing two headers: Fruit and Color. Add a tbody with three rows: Apple with color Red, Banana with color Yellow, and Grape with color Purple.

Bootsrap




    
    
    Fruit Table

Need a hint?

Remember to use <thead> for headers and <tbody> for the data rows.

Add Bootstrap CSS link

Add the Bootstrap 5 CSS CDN link inside the <head> section, before the <title> tag. Use the href https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css and set rel="stylesheet".

Bootsrap




    
    
    
    Fruit Table


    
        
            
                Fruit
                Color
            
        
        
            
                Apple
                Red
            
            
                Banana
                Yellow
            
            
                Grape
                Purple

Need a hint?

Use a <link> tag with rel="stylesheet" and the Bootstrap CDN URL as href.

Add Bootstrap classes to style the table

Add the Bootstrap classes table, table-bordered, and table-striped to the <table> element to add borders and striped rows.

Bootsrap




    
    
    
    Fruit Table


    
        
        
            
                Fruit
                Color
            
        
        
            
                Apple
                Red
            
            
                Banana
                Yellow
            
            
                Grape
                Purple

Need a hint?

Add all three classes inside the class attribute separated by spaces.

Wrap the table in a responsive container

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

Bootsrap




    
    
    
    Fruit Table


    
    
        
            
                Fruit
                Color
            
        
        
            
                Apple
                Red
            
            
                Banana
                Yellow
            
            
                Grape
                Purple

Need a hint?

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