Lesson 13: Tables & Data Display Components in Bootstrap

—

by

admin
in
Module 1: Introduction to Bootstrap 2025

Module 2: Bootstrap Grid System & Responsive Layouts

Module 3: Bootstrap Components & UI Elements

Module 4: Navigation & Menus in Bootstrap

Module 5: Advanced Bootstrap Features

Module 6: Forms, Authentication & Data Handling

Module 7: Bootstrap & JavaScript Integration

Module 8: Bootstrap with React, Vue, and Angular

📌 Objective: Learn how to use Bootstrap’s tables and data display components to create well-structured, responsive, and interactive tables.

🔹 1. Introduction to Bootstrap Tables & Data Display Components

Tables are used to display structured data, such as user information, financial records, or lists.
Bootstrap provides pre-styled tables and interactive features like striping, borders, hover effects, and responsiveness.

💡 Why Use Bootstrap Tables?
✔️ Pre-styled tables without extra CSS.
✔️ Responsive and mobile-friendly.
✔️ Sortable and interactive using Bootstrap JS or external plugins.

🔹 2. Basic Bootstrap Table

Use .table to create a basic table with Bootstrap styles.

✅ Example: Basic Table

html
<div class="container">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alice</td>
<td>alice@example.com</td>
<td>Admin</td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
<td>bob@example.com</td>
<td>User</td>
</tr>
</tbody>
</table>
</div>

🔹 What happens?

  • The table is automatically styled and spaced with Bootstrap.

🔹 3. Advanced Table Styling

1️⃣ Striped Rows (.table-striped)

✅ Example: Striped Rows

html
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Laptop</td>
<td>$999</td>
</tr>
<tr>
<td>2</td>
<td>Phone</td>
<td>$499</td>
</tr>
</tbody>
</table>

🔹 What happens?

  • Every other row gets a striped background, improving readability.

2️⃣ Hover Effects (.table-hover)

✅ Example: Table with Hover Effects

html
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Service</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Web Development</td>
<td>$1500</td>
</tr>
<tr>
<td>2</td>
<td>SEO Optimization</td>
<td>$800</td>
</tr>
</tbody>
</table>

🔹 What happens?

  • Rows change background color when hovered.

3️⃣ Bordered Tables (.table-bordered)

✅ Example: Table with Borders

html
<table class="table table-bordered">
<thead>
<tr>
<th>Item</th>
<th>Category</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>Keyboard</td>
<td>Electronics</td>
<td>20</td>
</tr>
<tr>
<td>Desk Chair</td>
<td>Furniture</td>
<td>5</td>
</tr>
</tbody>
</table>

🔹 What happens?

  • Adds borders around the entire table and each cell.

4️⃣ Small & Large Tables (.table-sm & .table-lg)

✅ Example: Compact Table (.table-sm)

html
<table class="table table-sm">
<thead>
<tr>
<th>Task</th>
<th>Deadline</th>
</tr>
</thead>
<tbody>
<tr>
<td>Design Homepage</td>
<td>Oct 10</td>
</tr>
<tr>
<td>Develop Backend</td>
<td>Oct 20</td>
</tr>
</tbody>
</table>

🔹 What happens?

  • Reduces padding inside table cells, making it more compact.

🔹 4. Responsive Tables (.table-responsive)

Use .table-responsive to make tables scrollable on small screens.

✅ Example: Responsive Table

html
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Employee</th>
<th>Department</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>HR</td>
<td>$5000</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>Marketing</td>
<td>$4500</td>
</tr>
</tbody>
</table>
</div>

🔹 What happens?

  • The table scrolls horizontally on small screens.

🔹 5. Advanced Interactive Tables

Use JavaScript and Bootstrap utilities to make tables sortable, searchable, and interactive.

1️⃣ Sortable Tables

✅ Example: Sortable Table Using JavaScript

html
<table class="table table-hover" id="sortableTable">
<thead>
<tr>
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</tbody>
</table>

<script>
function sortTable(columnIndex) {
let table = document.getElementById("sortableTable");
let rows = Array.from(table.rows).slice(1);
rows.sort((a, b) => a.cells[columnIndex].innerText.localeCompare(b.cells[columnIndex].innerText));
rows.forEach(row => table.appendChild(row));
}
</script>

🔹 What happens?

  • Clicking on column headers sorts the table dynamically.

📝 Lesson Recap Quiz

🎯 Test your knowledge of Bootstrap Tables.

📌 Multiple-Choice Questions (MCQs)

1️⃣ What class is used to make a Bootstrap table responsive?
a) .table-scroll
b) .table-responsive
c) .table-mobile
d) .table-fluid

✅ Correct Answer: b) .table-responsive

2️⃣ How can you add row hover effects in a Bootstrap table?
a) .table-hover
b) .table-strip
c) .table-highlight
d) .hover-effect

✅ Correct Answer: a) .table-hover

3️⃣ What class reduces padding inside table cells?
a) .table-small
b) .table-condensed
c) .table-sm
d) .table-compact

✅ Correct Answer: c) .table-sm

📌 True or False

4️⃣ Bootstrap provides built-in JavaScript sorting for tables.
✅ Answer: False (Sorting requires custom JavaScript or a plugin.)

5️⃣ The .table-striped class adds zebra striping to rows.
✅ Answer: True

🎯 Practical Challenge

✅ Create a responsive table with:

  • Striped rows (.table-striped)
  • Hover effects (.table-hover)
  • Column sorting (using JavaScript)
    ✅ Post your solution in the discussion forum for feedback!

🎓 Lesson Summary

✅ Bootstrap tables (.table) are pre-styled and responsive.
✅ .table-striped, .table-hover, .table-bordered enhance table styling.
✅ JavaScript or third-party plugins can make tables sortable & searchable.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *