Tables

Basic Table

Name Role Status
Alice Developer Active
Bob Designer Active 
<table class="table align-items-center mb-0">
  <thead>
    <tr>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Name</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Role</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="text-sm font-weight-bold">Alice</span></td>
      <td><span class="text-sm">Developer</span></td>
      <td><span class="badge bg-gradient-success">Active</span></td>
    </tr>
  </tbody>
</table>

Table Header Style

All table headers should use these classes for consistency:

<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">

Usage Guidelines

  • Always wrap tables in a card
  • Use the standard header classes for visual consistency
  • Use text-sm for cell content
  • Use badges for status columns
  • Use align-items-center on the table element
  • For large datasets, consider DataTables integration with pagination
On this page