1. Basic Bootstrap Table Setup
First include Bootstrap CSS and JS.
Result
Bootstrap automatically adds:
padding
borders
clean layout
responsive styling
2. Table Styling Classes
Bootstrap provides many table design options.
Class
Purpose
.table
Basic table
.table-striped
Zebra stripes
.table-bordered
Borders
.table-hover
Row hover effect
.table-dark
Dark theme
Example
<table class="table table-striped table-hover table-bordered">
Output Features
✔ Alternate row colors
✔ Hover effect
✔ Borders
3. Contextual Row Colors
Bootstrap allows status-based row colors.
<table class="table">
<tr class="table-success">
<td>Payment Success</td>
</tr>
<tr class="table-warning">
<td>Pending Payment</td>
</tr>
<tr class="table-danger">
<td>Payment Failed</td>
</tr>
</table>
Color Classes
Class
Meaning
table-primary
Blue
table-success
Green
table-warning
Yellow
table-danger
Red
table-info
Cyan
4. Responsive Tables (Important Feature)
Tables often break on mobile screens.
Bootstrap solves this with:
<div class="table-responsive">
<table class="table">
Example
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
</tr>
</thead>
<body>
<tr>
<td>1</td>
<td>Ali</td>
<td>ali@email.com</td>
<td>987654321</td>
<td>Hyderabad</td>
</tr>
</body>
</table>
</div>
✔ Adds horizontal scroll on small devices
5. Small Tables
Reduce table size.
<table class="table table-sm">
✔ Smaller padding
✔ Good for dashboards
6. Table Head Styling
You can style table headers.
<thead class="table-dark">
Example:
<table class="table">
<thead class="table-dark">
<tr>
<th>ID</th>
<th>Name</th>
<th>Course</th>
</tr>
</thead>
</table>
7. Advanced Feature: Table Groups
You can organize rows.
<body>
<tr>
<td>1</td>
<td>Student A</td>
</tr>
</body>
<body>
<tr>
<td>2</td>
<td>Student B</td>
</tr>
</body>
Useful for grouping data sections.
8. Adding Buttons Inside Tables
Example: Edit / Delete
<td>
<button class="btn btn-primary btn-sm">Edit</button>
<button class="btn btn-danger btn-sm">Delete</button>
</td>
Full Example:
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<body>
<tr>
<td>1</td>
<td>Rahul</td>
<td>
<button class="btn btn-success btn-sm">Edit</button>
<button class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
</body>
</table>
9. Advanced Feature: Table with Images
Example user profile table.
<td>
<img src="user.jpg" width="40" class="rounded-circle">
</td>
10. Advanced Feature: Table with Icons
Using icons improves the UI.
Example:
<td>
<span class="badge bg-success">Active</span>
</td>
Status table example:
User
Status
John
Active
David
Pending
11. Advanced Feature: Scrollable Tables
For large datasets.
<div style="height:300px; overflow-y:auto;">
<table class="table">
12. Professional Dashboard Table Example
<div class="container mt-4">
<h3>User Management</h3>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<body>
<tr>
<td>1</td>
<td>Rahul</td>
<td>rahul@email.com</td>
<td><span class="badge bg-success">Active</span></td>
<td>
<button class="btn btn-warning btn-sm">Edit</button>
<button class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
</body>
</table>
</div>
</div>
✔ Responsive
✔ Professional design
✔ Used in admin dashboards
13. Modern Advanced Feature: Bootstrap Table with Search
Add JavaScript search.
<input type="text" id="searchInput" class="form-control mb-3" placeholder="Search">
<script>
document.getElementById("searchInput").addEventListener("keyup", function() {
let value = this.value.toLowerCase();
let rows = document.querySelectorAll("tbody tr");
rows.forEach(function(row){
row.style.display = row.innerText.toLowerCase().includes(value) ? "" : "none";
});
});
</script>
✔ Live search filter
14. Pagination Table (Advanced)
Using JavaScript or plugins you can add:
pagination
sorting
filtering
export to Excel
Popular plugin:
Bootstrap Table Plugin
Features:
search
sort
pagination
column toggle
export data
15. Project Uses
Bootstrap tables are used in:
Application
Table Example
Admin dashboard
User list
E-commerce
Orders table
School system
Student list
Hospital system
Patient records
CRM
Customer data
Exercise
Create a Student Management Table
Columns:
Student ID
Name
Course
Marks
Status
Action Buttons
Add:
✔ striped rows
✔ hover effect
✔ responsive table
✔ status badges
✔ edit/delete buttons
No comments:
Post a Comment