📊 Bootstrap 5 – Tables: Responsive, Styled, and Interactive Table Design

🧲 Introduction – Why Use Bootstrap 5 Tables?

Tables are essential for displaying structured data in dashboards, admin panels, pricing sections, and more. Bootstrap 5 offers a set of table classes that are clean, responsive, and easy to enhance with color, borders, hover effects, and responsive wrapping.

🎯 In this guide, you’ll learn:

• How to use .table classes for clean styling
• Add stripes, hover effects, borders, and colors
• Make tables responsive on mobile
• Create compact tables with .table-sm

---

🖥️ 1. Basic Table with .table

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Notebook</td>
      <td>$20</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Pen</td>
      <td>$5</td>
    </tr>
  </tbody>
</table>

🔍 Explanation:

• .table adds padding, borders, and spacing
• The result is a clean, readable table by default

---

✅ 2. Striped Rows with .table-striped

<table class="table table-striped">
  ...
</table>

🔍 Effect:

• Alternating row backgrounds for readability

---

✅ 3. Hover Effect with .table-hover

<table class="table table-hover">
  ...
</table>

🔍 Effect:

• Rows highlight on mouse hover for better UX

---

✅ 4. Bordered Table with .table-bordered

<table class="table table-bordered">
  ...
</table>

🔍 Effect:

• Adds borders to all rows and columns

---

✅ 5. Condensed Table with .table-sm

<table class="table table-sm">
  ...
</table>

🔍 Effect:

• Reduces cell padding for compact tables (great for dashboards)

---

✅ 6. Contextual Colors for Rows

<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>

Class	Color Used
table-primary	Blue
table-success	Green
table-danger	Red
table-warning	Yellow/Orange
table-info	Light blue
table-light	Light gray
table-dark	Dark gray/black

---

✅ 7. Responsive Tables with .table-responsive

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

🔍 Effect:

• Adds horizontal scrolling on small screens
• Prevents table from breaking mobile layout

---

✅ 8. Combine Multiple Table Utilities

<div class="table-responsive">
  <table class="table table-striped table-hover table-bordered table-sm">
    ...
  </table>
</div>

🔍 Result:

• Compact, colorful, hoverable, and mobile-friendly table

---

🛠️ Best Practices for Bootstrap 5 Tables

Tip	Why It’s Useful
Wrap in .table-responsive	Ensures tables scroll on small devices
Use contextual classes sparingly	Highlight important rows without overuse
Combine .table-hover + .striped	For better UI feedback and readability
Use .table-sm for dense UIs	Reduces padding in dashboards and widgets
Always include <thead> and <tbody>	Improves structure, accessibility, and SEO

---

📌 Summary – Mastering Tables with Bootstrap 5

Bootstrap 5 makes it simple to create clean, responsive, and interactive tables. Whether you’re displaying data in a dashboard or on a pricing page, you can use Bootstrap’s table utilities to adapt content across devices.

🔍 Key Takeaways:

• Use .table as the base for all tables
• Add .table-striped, .hover, .bordered for styling
• Combine with .table-responsive for mobile support
• Contextual classes help communicate row meanings (e.g., success/danger)

⚙️ Ideal for admin panels, reports, invoicing, order history, and pricing tables.

---

❓ FAQs – Bootstrap 5 Tables

❓ What is .table-responsive in Bootstrap 5?
✅ It adds horizontal scrolling for tables on small screens. Wrap your table in a <div class="table-responsive">.

---

❓ Can I combine .table-striped and .table-hover?
✅ Yes. You can use multiple classes together to enhance table UX.

---

❓ How do I reduce table cell spacing?
✅ Use .table-sm to create a compact table with less padding.

---

❓ Can I color individual rows in Bootstrap tables?
✅ Yes, using contextual row classes like .table-success, .table-danger, etc.

---

❓ Are Bootstrap 5 tables responsive by default?
❌ No. Use .table-responsive to make them scrollable on mobile screens.

---

Share Now :