Bootstrap 5 Tables

Bootstrap 5 Tables Guide

Bootstrap 5 provides a variety of responsive, styled tables with built-in classes for better readability and usability.

---

1. Basic Table

Use the .table class to style a table.

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>john@example.com</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jane Smith</td>
            <td>jane@example.com</td>
            <td>28</td>
        </tr>
    </tbody>
</table>

---

2. Table with Borders

Use .table-bordered to add borders around all table cells.

<table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Laptop</td>
            <td>$1000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Phone</td>
            <td>$500</td>
        </tr>
    </tbody>
</table>

---

3. Striped Rows

Use .table-striped to add alternating row colors.

<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>Item</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Apple</td>
            <td>10</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Banana</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

---

4. Hover Effect

Use .table-hover to highlight rows on hover.

<table class="table table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>City</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>New York</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>2</td>
            <td>London</td>
            <td>UK</td>
        </tr>
    </tbody>
</table>

---

5. Dark Table

Use .table-dark for a dark-themed table.

<table class="table table-dark">
    <thead>
        <tr>
            <th>#</th>
            <th>Team</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Team A</td>
            <td>89</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Team B</td>
            <td>76</td>
        </tr>
    </tbody>
</table>

---

6. Table with Different Colors

You can use contextual classes (.table-primary, .table-danger, etc.) for different row colors.

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-success">
            <td>1</td>
            <td>Completed</td>
        </tr>
        <tr class="table-warning">
            <td>2</td>
            <td>Pending</td>
        </tr>
        <tr class="table-danger">
            <td>3</td>
            <td>Cancelled</td>
        </tr>
    </tbody>
</table>

---

7. Responsive Table

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

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>Country</th>
                <th>Population</th>
                <th>Capital</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>India</td>
                <td>1.4 Billion</td>
                <td>New Delhi</td>
            </tr>
            <tr>
                <td>2</td>
                <td>USA</td>
                <td>331 Million</td>
                <td>Washington D.C.</td>
            </tr>
        </tbody>
    </table>
</div>

---

Conclusion

✔ Bootstrap 5 tables are easy to style with borders, colors, hover effects, and responsiveness.
✔ .table-responsive ensures mobile-friendly tables.
✔ Use contextual classes like .table-striped, .table-hover, and .table-dark for better UI.

Need more examples? Let me know!

Share on Google Plus

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.