software-development-company-logo

Tag: Lesson 13: Tables & Data Display Components in Bootstrap

  • Lesson 13: Tables & Data Display Components in Bootstrap

    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.