Bootstrap Tables

Bootstrap Tables Overview

Adding .table to a standard HTML table applies consistent padding, borders, and typography. From there, modifier classes like table-striped, table-bordered, table-hover, and table-dark let you combine visual styles without writing custom CSS.

Because tables don't naturally shrink on small screens, Bootstrap provides a .table-responsive wrapper that adds horizontal scrolling instead of letting the table break the page layout, which is essential for any table with many columns.

Bootstrap Tables Example

<div class="table-responsive">
  <table class="table table-striped table-hover align-middle">
    <thead class="table-dark">
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Alice</td>
        <td><span class="badge bg-success">Active</span></td>
      </tr>
      <tr class="table-warning">
        <td>2</td>
        <td>Bob</td>
        <td><span class="badge bg-warning text-dark">Pending</span></td>
      </tr>
    </tbody>
  </table>
</div>

The table-responsive wrapper ensures the table scrolls horizontally on narrow screens instead of breaking the layout. table-striped and table-hover combine for readability and interactivity, table-dark styles the header, and the contextual table-warning class highlights a specific row.

Top 10 Bootstrap Tables Examples

These are the table modifier classes you'll combine most often when styling tabular data.

Popular Real-World Bootstrap Tables Examples

These table patterns are commonly used in admin panels, pricing pages, and data-heavy dashboards.

Best Practices

• Always wrap tables in .table-responsive when column count could overflow small screens.
• Use table-striped for long tables to help users track rows visually.
• Combine table-hover with clickable rows to signal interactivity.
• Use contextual row classes (table-success, table-danger) sparingly to highlight meaningful status.
• Pair table-dark headers with a lighter table body for clear visual separation.
• Use table-sm on dense admin tables to fit more rows without scrolling.
• Keep table headers using proper <th> elements with scope attributes for accessibility.

Common Mistakes

• Forgetting .table-responsive, causing wide tables to break page layout on mobile.
• Overusing contextual row colors until the table loses meaningful visual hierarchy.
• Using table-bordered and table-borderless together, which conflicts visually.
• Not using semantic thead/tbody/tfoot structure, hurting accessibility and styling consistency.
• Applying table-dark only to the whole table when just the header needed emphasis.
• Nesting interactive elements like buttons in narrow cells without enough padding, hurting usability.

Key Takeaways

• The base .table class provides consistent baseline styling for any HTML table.
• Modifier classes like striped, bordered, hover, and dark can be combined freely.
• .table-responsive prevents wide tables from breaking small-screen layouts.
• Contextual classes highlight specific rows or cells with theme colors.
• table-sm and align-middle fine-tune density and vertical alignment.