Bootstrap 5 Tables

Creating beautiful and responsive tables with Bootstrap

📊 What are Bootstrap Tables?

Bootstrap tables are styled HTML tables with built-in classes for better appearance and responsiveness. They help organize data in rows and columns with minimal effort and maximum visual appeal. 


<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Output:

Name Age
John 25

🔹 Basic Table

Apply the .table class to add clean, professional styling with light padding and horizontal dividers to tabular data. Bootstrap’s basic table provides a consistent, readable structure without extra configuration, making it ideal for displaying datasets, comparison charts, or structured information. This foundational component ensures tables are visually organized and accessible, serving as a reliable starting point for more advanced customizations and responsive behaviors.

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Laptop</td>
      <td>$999</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mouse</td>
      <td>$29</td>
    </tr>
  </tbody>
</table>

Output:

# Product Price
1 Laptop $999
2 Mouse $29

🔹 Striped Rows

Add the .table-striped class to apply alternating row colors, improving readability across wide or dense tables. Zebra striping helps users track data horizontally, reducing eye strain and making it easier to distinguish between rows. This visual pattern is especially useful for financial reports, data grids, or any table with extensive entries, enhancing scanability and reducing errors during data analysis or review.

<table class="table table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Charlie</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Output:

Name Email
Alice [email protected]
Bob [email protected]
Charlie [email protected]

🔹 Bordered Table

Use the .table-bordered class to add borders on all sides of the table and individual cells, defining clear visual separation. Bordered tables create a structured, grid-like appearance that emphasizes cell boundaries, making it easier to locate specific data points. This style is effective for forms, schedules, or any content where precise alignment and compartmentalization improve clarity and usability.

<table class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>002</td>
      <td>Pending</td>
    </tr>
  </tbody>
</table>

Output:

ID Status
001 Active
002 Pending

🔹 Hoverable Rows

Enable the .table-hover class to highlight table rows on mouseover, providing interactive feedback during data scanning. Hover effects improve user experience by visually confirming row selection, making it easier to follow lines of data across wide tables. This feature is valuable in admin panels, dashboards, or interactive reports where users frequently browse or select entries, adding a layer of responsiveness and polish.

<table class="table table-hover">
  <thead>
    <tr>
      <th>Course</th>
      <th>Duration</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>2 weeks</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>3 weeks</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>4 weeks</td>
    </tr>
  </tbody>
</table>

Output:

Course Duration
HTML 2 weeks
CSS 3 weeks
JavaScript 4 weeks

🔹 Colored Tables

Apply contextual color classes like .table-primary, .table-success, or .table-danger to rows or cells for visual categorization. Color coding helps users quickly identify status, priority, or data types—green for success, red for alerts, blue for information. This instant visual communication enhances data interpretation in interfaces like task trackers, status boards, or analytics displays, enabling faster decision-making and improved information hierarchy.

<table class="table">
  <thead>
    <tr>
      <th>Task</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <td>Design</td>
      <td>Complete</td>
    </tr>
    <tr class="table-warning">
      <td>Development</td>
      <td>In Progress</td>
    </tr>
    <tr class="table-danger">
      <td>Testing</td>
      <td>Pending</td>
    </tr>
  </tbody>
</table>

Output:

Task Status
Design Complete
Development In Progress
Testing Pending

🔹 Responsive Table

Wrap tables in a .table-responsive container to enable horizontal scrolling on smaller screens, maintaining usability across devices. Responsive tables prevent layout breaks on mobile by allowing users to swipe horizontally to view all columns. This ensures data remains accessible and legible regardless of screen size, essential for e-commerce, data-heavy applications, or any interface presenting complex tabular information on smartphones or tablets.

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>[email protected]</td>
        <td>555-1234</td>
        <td>New York</td>
      </tr>
    </tbody>
  </table>
</div>

Output:

# Name Email Phone City
1 John Doe [email protected] 555-1234 New York

🧠 Test Your Knowledge

Which class adds zebra-striping to table rows?