❮ Previous Next ❯

Bootstrap Table

  • Style and manage responsive tables using Bootstrap classes.

  • Introduction to Tables in Bootstrap 

    Tables are used to display structured data in rows and columns, such as:

    • User lists

    • Product details

    • Reports

    • Records

    • Admin data

    In Bootstrap 5, tables are pre-styled, responsive-friendly, and easy to customize using utility classes.

    Bootstrap tables are built on standard HTML <table> elements, enhanced with Bootstrap classes.

    Basic Bootstrap Table

    What Is a Basic Table ?

    A basic table uses the .table class to apply Bootstrap styling.

Creating a Basic Styled Table

The .table class adds basic Bootstrap styling to an HTML table. 

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alice</td>
      <td>22</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bob</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

  • What .table Does

    • Adds padding

    • Adds borders between rows

    • Improves readability

    • Applies clean default styling

    Table Head Styling

    Dark Table Header

    Use .table-dark with <thead>.

Styling Table Headers with Dark Theme

Using .table-dark inside applies a dark background to the table header. 

<table class="table">
  <thead class="table-dark">
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>john@email.com</td>
    </tr>
  </tbody>
</table>

  • Used when:

    • Header needs emphasis

    • Data-heavy tables

    Striped Rows

    What Are Striped Tables ?

    Striped tables add alternating background colors to rows for better readability.

Creating Striped Rows

The .table-striped class adds alternating row colors for improved readability. 

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

  • Used when:

    • Table has many rows

    • Visual scanning is important

     Bordered Table

Adding Borders to a Table

The .table-bordered class adds borders to all table cells. 

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

  • Effect:

    • Adds borders to all cells

    • Makes table grid clear

    Used in:

    • Reports

    • Admin dashboards

    • Financial data

    Borderless Table

Creating a Borderless Table

The .table-borderless class removes all borders from the table. 

<table class="table table-borderless"></table>

  • Used when:

    • Clean UI is needed

    • Minimal design

    Hoverable Rows

Creating Hoverable Rows in a Table

The .table-hover class adds a hover effect to table rows for better user interaction. 

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

  • Effect:

    • Highlights row on mouse hover

    Common use:

    • Clickable data rows

    • Interactive tables

    Small Table

Creating a Compact Table

The .table-sm class reduces padding to create a smaller, compact table. 

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

  • Effect:

    • Reduced padding

    • Compact row height

    Used in:

    • Dense data views

    • Dashboards

    Contextual Table Classes

Applying Contextual Colors to Table Rows

Contextual classes like .table-success and .table-danger add color-based meaning to table rows. 

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

<!-- Example -->
<tr class="table-success">
  <td>Payment Received</td>
</tr>

  • Used for:

    • Status indication

    • Highlighting important rows

    Table with Dark Theme

Creating a Dark-Themed Table

The .table-dark class applies a dark background and light text to the entire table. 

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

  • Effect:

    • Dark background

    • Light text

    Used in:

    • Dark UI themes

    • Admin panels

    Responsive Tables

    Why Responsive Tables Are Needed

    Tables can overflow on small screens.
    Bootstrap solves this using .table-responsive.

Creating Responsive Tables

The .table-responsive class makes tables scroll horizontally on small screens. 

<div class="table-responsive">
  <table class="table">
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
    <tr>
      <td>Alice</td>
      <td>a@email.com</td>
      <td>1234567890</td>
    </tr>
  </table>
</div>

  • Effect:

    • Horizontal scroll on small screens

    • No layout break

    Table Caption

Adding a Caption

The tag adds a title or description to the table. 

<table class="table">
  <caption>User List</caption>
</table>

  • Purpose:

    • Describes table content

    • Improves accessibility

      Common Mistakes

      • Forgetting .table class

      • Not using <thead> and <tbody>

      • Ignoring responsiveness

      • Overusing colors

      • Using tables for page layout

      Tables should be used only for tabular data, not layout.

      Best Practices for Bootstrap Tables

      • Use .table as base

      • Add features only when needed

      • Keep tables readable

      • Always make tables responsive

      • Avoid overcrowding cells

    ❮ Previous Next ❯