How do you create responsive tables in Bootstrap?

Beginner

Answer

Bootstrap provides table classes for styling and responsive behavior:

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead class="table-dark">
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>john@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Table classes:

  • table-striped: Alternate row colors
  • table-hover: Hover effect on rows
  • table-bordered: Add borders
  • table-responsive: Horizontal scrolling on small screens
  • table-{color}: Contextual background colors