Small and compact tables in Bootsrap - Mini Project: Build & Apply

Small and Compact Tables with Bootstrap

📖 Scenario: You are creating a simple webpage to display a small and compact table of employee data for a company directory.

🎯 Goal: Build a small and compact table using Bootstrap classes that shows employee names, roles, and departments in a neat, space-saving style.

📋 What You'll Learn

Use Bootstrap 5 classes to style the table

Create a table with three columns: Name, Role, Department

Make the table small and compact using Bootstrap's table-sm class

Use semantic HTML elements for accessibility

Ensure the table is responsive on small screens

💡 Why This Matters

🌍 Real World

Small and compact tables are useful for displaying data clearly in dashboards, reports, or directories where space is limited.

💼 Career

Knowing how to use Bootstrap tables helps web developers quickly build professional and responsive data displays for clients and users.

1

Create the basic HTML table structure

Create a table element with a thead containing a row with three headers: Name, Role, and Department. Then add a tbody with three rows of employee data: Alice Johnson as Developer in Engineering, Bob Smith as Designer in Marketing, and Carol Lee as Manager in Sales.

Bootsrap

    
    
    Employee Directory
    


    
        
        
    

Need a hint?

Use the <table> element with <thead> and <tbody>. Add three columns in the header and three rows in the body with the exact employee data.

2

Add Bootstrap table classes for styling

Add the Bootstrap classes table and table-bordered to the table element to style it with borders and default Bootstrap table styling.

Bootsrap

    
    
    Employee Directory
    


    
        
            
            
        
    

Need a hint?

Add the classes table and table-bordered inside the class attribute of the table tag.

3

Make the table small and compact

Add the Bootstrap class table-sm to the table element along with the existing classes to make the table smaller and more compact.

Bootsrap

    
    
    Employee Directory
    


    
        
            
            
        
    

Need a hint?

Add the class table-sm to the existing class attribute on the table tag to make it smaller and more compact.

4

Make the table responsive

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

Bootsrap

    
    
    Employee Directory
    


    
        
            
                
                
            
        
    

Need a hint?

Wrap the entire table element inside a div with the class table-responsive to enable horizontal scrolling on small screens.