Bootstrap Tables — Styled and Responsive Data Tables

DodaTech Updated 2026-06-28 4 min read

In this tutorial, you will learn about Bootstrap Tables. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap table utilities style HTML tables with stripes, borders, hover effects, dark mode, and responsive horizontal scrolling for data presentation.

What You'll Learn

You will learn how to create styled tables, add striped rows, borders, hover effects, contextual row colors, and make tables responsive on small screens.

Why It Matters

Tables present structured data clearly. DodaTech's comparison pages use Bootstrap tables to show feature differences, pricing tiers, and version histories.

Real-World Use

Durga Antivirus Pro's scan history report uses a striped, responsive table with contextual colors (green for clean, red for threats) and hover highlighting.

flowchart LR
    A[Images & Figures] --> B[Tables]
    B --> C[Basic Table]
    B --> D[Variants]
    B --> E[Responsive]
    C --> F[Striped]
    C --> G[Hover]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

Basic Table

<table class="table">
  <thead>
    <tr>
      <th>Feature</th>
      <th>Free</th>
      <th>Pro</th>
      <th>Enterprise</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Real-time scanning</td>
      <td>No</td>
      <td>Yes</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Cloud protection</td>
      <td>No</td>
      <td>No</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Priority support</td>
      <td>No</td>
      <td>No</td>
      <td>Yes</td>
    </tr>
  </tbody>
</table>

Expected output: A clean table with horizontal dividers between rows and bold header text.

Variants

Striped Rows

<table class="table table-striped">
  <thead>
    <tr><th>Name</th><th>Version</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Doda Browser</td><td>5.2.1</td><td>Stable</td></tr>
    <tr><td>DodaZIP</td><td>3.0.4</td><td>Stable</td></tr>
    <tr><td>Durga Antivirus</td><td>7.1.0</td><td>Beta</td></tr>
    <tr><td>Doda Drive</td><td>2.0.0</td><td>Deprecated</td></tr>
  </tbody>
</table>

Expected output: Alternating rows have a subtle gray background for easier scanning.

Bordered Table

<table class="table table-bordered">
  <thead>
    <tr><th>Protocol</th><th>Port</th><th>Description</th></tr>
  </thead>
  <tbody>
    <tr><td>HTTP</td><td>80</td><td>Unencrypted web traffic</td></tr>
    <tr><td>HTTPS</td><td>443</td><td>Encrypted web traffic</td></tr>
    <tr><td>FTP</td><td>21</td><td>File transfer</td></tr>
  </tbody>
</table>

Expected output: All cells have visible borders on all sides.

Hover Rows

<table class="table table-hover">
  <thead>
    <tr><th>Product</th><th>Downloads</th><th>Rating</th></tr>
  </thead>
  <tbody>
    <tr><td>Doda Browser</td><td>1,234,567</td><td>4.8</td></tr>
    <tr><td>DodaZIP</td><td>987,654</td><td>4.6</td></tr>
    <tr><td>Durga Antivirus</td><td>2,345,678</td><td>4.9</td></tr>
  </tbody>
</table>

Expected output: Row backgrounds highlight on mouse hover.

Dark Table

<table class="table table-dark">
  <thead>
    <tr><th>Metric</th><th>Value</th><th>Change</th></tr>
  </thead>
  <tbody>
    <tr><td>Total scans</td><td>5,432,100</td><td>+12%</td></tr>
    <tr><td>Threats blocked</td><td>87,432</td><td>-3%</td></tr>
    <tr><td>False positives</td><td>142</td><td>-8%</td></tr>
  </tbody>
</table>

Expected output: A table with dark background and light text, suitable for dark-themed dashboards.

Combining Classes

<table class="table table-striped table-hover table-bordered">
  <thead class="table-dark">
    <tr><th>Feature</th><th>Free</th><th>Pro</th></tr>
  </thead>
  <tbody>
    <tr><td>Users</td><td>1</td><td>10</td></tr>
    <tr><td>Storage</td><td>5GB</td><td>50GB</td></tr>
    <tr><td>API access</td><td>No</td><td>Yes</td></tr>
  </tbody>
</table>

Expected output: A table with all three visual enhancements and a dark header row.

Contextual Row Colors

<table class="table">
  <thead>
    <tr><th>Status</th><th>Count</th></tr>
  </thead>
  <tbody>
    <tr class="table-success"><td>Clean files</td><td>4,521</td></tr>
    <tr class="table-warning"><td>Suspicious files</td><td>23</td></tr>
    <tr class="table-danger"><td>Threats detected</td><td>7</td></tr>
    <tr class="table-info"><td>Quarantined</td><td>12</td></tr>
  </tbody>
</table>

Expected output: Rows are colored according to their status — green for safe, yellow for suspicious, red for threats, blue for quarantined.

Responsive Tables

Wrap tables in a responsive container for horizontal scrolling on small screens:

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Column 1</th><th>Column 2</th><th>Column 3</th>
        <th>Column 4</th><th>Column 5</th><th>Column 6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td><td>Data 2</td><td>Data 3</td>
        <td>Data 4</td><td>Data 5</td><td>Data 6</td>
      </tr>
    </tbody>
  </table>
</div>

Expected output: On small screens, the table scrolls horizontally within the responsive container instead of shrinking and becoming unreadable.

Use breakpoint-specific responsive wrappers: table-responsive-sm, table-responsive-md, table-responsive-lg, etc.

Small Table

<table class="table table-sm">
  <thead>
    <tr><th>Key</th><th>Value</th></tr>
  </thead>
  <tbody>
    <tr><td>Padding</td><td>0.25rem instead of 0.5rem</td></tr>
    <tr><td>Use case</td><td>Dense data displays</td></tr>
  </tbody>
</table>

Expected output: A more compact table with half the default cell padding.

Common Mistakes

1. Missing thead and tbody

Tables need semantic <thead> and <tbody> sections for proper Bootstrap styling and Accessibility.

2. Using table-dark Without Accessible Contrast

table-dark provides dark backgrounds with white text. Ensure text is readable and meets contrast requirements.

3. Forgetting Responsive Wrappers on Data-Heavy Tables

Tables with many columns break mobile layouts. Always wrap them in table-responsive unless they have very few columns.

4. Mixing Contextual Colors with Striped

Striping can conflict with contextual row colors. Use one or the other, or test combinations carefully.

5. Using Tables for Layout

Tables are for tabular data, not page layout. Use Bootstrap's grid system for layout instead.

Practice Questions

What class adds alternating row colors? table-striped adds a subtle gray background to every other row.
How do you make a table horizontally scrollable on mobile? Wrap the table in a <div class="table-responsive">.
What class creates a compact table with less padding? table-sm halves the default cell padding.
How do you highlight a row in green? Add class="table-success" to the <tr> element.
Can you combine table-striped and table-hover? Yes. They work together — hover highlights override the striped background on mouseover.

Challenge

Build a pricing comparison table with two plans. Highlight the recommended plan row with table-success, add table-hover for interactivity, and make the table responsive on mobile.

FAQ

Can I use Bootstrap table classes on div-based tables?

No. Bootstrap table classes target HTML table elements. For div-based layouts, use the grid system instead.

How do I create a sticky table header?

Use position-sticky on the thead or th elements. Bootstrap does not include a built-in sticky header class for tables.

Does Bootstrap support table footers?

Yes. Use with and elements. Bootstrap styles table footers consistently with the body.

Can I use dark mode with table-dark?

table-dark is a standalone dark variant. For automatic dark mode, use CSS media queries or a dark mode toggle with contextual classes.

How do I export a Bootstrap table?

Bootstrap does not include export functionality. Use JavaScript libraries like TableExport or SheetJS for CSV/Excel export.

Mini Project

Build a product comparison page with a responsive table comparing 3 products across 8 features. Use contextual colors to highlight which product has each feature (green for yes, red for no).

What's Next

Learn Forms and Inputs for user input handling. Then explore Form Validation for client-side validation.

← Previous Bootstrap Images & Figures — Responsive Media Utilities Next → Bootstrap Forms & Inputs — Form Controls and Layout

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap