Bootstrap Tables

Bootstrap 3 Tutorial

🅱️ Bootstrap Tables – Complete Guide

Bootstrap Tables help you create clean, responsive, and well-styled tables quickly using predefined classes—without writing custom CSS.

📌 Works with Bootstrap 4 & 5 (class names mostly same).

1️⃣ What are Bootstrap Tables?

Bootstrap tables:

  • Style HTML <table> elements

  • Add borders, stripes, hover effects

  • Support responsive behavior

  • Improve readability & UI consistency

2️⃣ Basic Bootstrap Table ⭐

HTML Example

✔ Adds padding
✔ Clean default style

3️⃣ Table Variants (Very Important ⭐)

🔹 Striped Table

<table class="table table-striped">

✔ Alternating row colors

🔹 Bordered Table

<table class="table table-bordered">

✔ Borders on all cells

🔹 Borderless Table

<table class="table table-borderless">

✔ No borders at all

🔹 Hoverable Rows

<table class="table table-hover">

✔ Highlight row on hover

4️⃣ Dark Table ⭐

<table class="table table-dark">

📌 Can be combined:

<table class="table table-dark table-striped">

5️⃣ Small / Compact Table ⭐

<table class="table table-sm">

✔ Less padding
✔ Useful for dashboards

6️⃣ Table Head Styling ⭐

<thead class="table-dark">

or

<thead class="table-light">

7️⃣ Contextual Classes (Row & Cell Colors) ⭐⭐

Used to show status information.

✔ Very common in admin panels

8️⃣ Responsive Tables ⭐⭐ (Most Important)

Make Table Scrollable on Small Screens

📌 Prevents layout breaking on mobile

9️⃣ Combining Multiple Table Classes ⭐

<table class="table table-striped table-bordered table-hover">

✔ Fully styled professional table

🔟 Bootstrap Table without <thead> ❌

Technically allowed, but not recommended.

✔ Always use <thead> and <tbody> for:

  • Accessibility

  • Clean structure

  • Interviews

1️⃣1️⃣ Bootstrap Tables vs Plain HTML Tables ⭐

Feature HTML Table Bootstrap Table
Styling Manual CSS Predefined
Responsive ❌ No ✔ Yes
Hover/Stripe ❌ No ✔ Yes
Speed Slow Fast

❌ Common Mistakes

❌ Forgetting class="table"
❌ Not using .table-responsive
❌ Overusing dark tables
❌ Mixing Bootstrap 4 & 5 incorrectly

📌 Interview Questions & MCQs

Q1. Basic Bootstrap table class?

A) table-basic
B) table
C) tbl
D) bootstrap-table

✅ Answer: B

Q2. Which class adds zebra stripes?

A) table-hover
B) table-bordered
C) table-striped
D) table-dark

✅ Answer: C

Q3. How to make table responsive?

A) table-fluid
B) table-mobile
C) table-responsive
D) responsive-table

✅ Answer: C

Q4. Which class highlights row on hover?

A) table-hover
B) table-active
C) hover-row
D) row-hover

✅ Answer: A

🔥 Real-Life Use Cases

✔ Student marks table
✔ Employee records
✔ Admin dashboards
✔ Product lists
✔ Reports & analytics

✅ Summary

  • Bootstrap tables simplify table styling

  • Use table as base class

  • Add stripes, borders, hover easily

  • Use .table-responsive for mobile

  • Contextual classes show status

  • Must-know for Bootstrap & UI interviews

You may also like...