Prev Next

BS5 Tables

Bootstrap 5 offers predefined classes for creating elegant, responsive tables. Learn how to style tables, add striped rows, hover effects, and more.

Key Topics

Basic Table Structure

The core Bootstrap class .table adds base styling. Rows and cells remain standard HTML <tr> and <td> tags.

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First</th>
            <th>Last</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Doe</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jane</td>
            <td>Smith</td>
        </tr>
    </tbody>
</table>

Explanation: The .table class applies padding, border collapse, and horizontal lines. Use <thead> and <tbody> to structure header vs. body content.

Table Variants

Bootstrap provides additional styles like .table-striped, .table-hover, and .table-bordered for different use cases.

<table class="table table-striped table-hover table-bordered">
    <!-- Table content -->
</table>

Explanation: You can combine these modifiers to achieve striped rows (.table-striped), row hover states (.table-hover), and borders (.table-bordered) in a single table.

Complete Table Example

Below is a full HTML page demonstrating a responsive table with Bootstrap classes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Table Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>User Data</h2>
        <div class="table-responsive">
            <table class="table table-striped table-hover table-bordered">
                <thead class="table-dark">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">First Name</th>
                        <th scope="col">Last Name</th>
                        <th scope="col">Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>John</td>
                        <td>Doe</td>
                        <td>john@example.com</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jane</td>
                        <td>Smith</td>
                        <td>jane@example.org</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: The .table-responsive wrapper ensures horizontal scrolling on smaller screens. Combining .table-striped, .table-hover, and .table-bordered offers a polished look.

Key Takeaways

  • .table provides default styles for tabular data.
  • Variants like .table-striped and .table-hover enhance readability and interactivity.
  • Use .table-responsive to handle tables on smaller devices.
Prev Next