Tables design

Bootstrap 5 table variants and responsive layouts.
Components

Tables design

Responsive wrappers, hover rows, and bordered & striped patterns with even panel spacing.

Basic table
Heading Heading 2 Heading 3 Heading 4 Heading 5
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Basic table ยท .table-responsive + .table-hover
Markup reference

Wrap tables in .table-responsive for horizontal scroll on small viewports.

<div class="table-responsive rounded-3 border">
  <table class="table table-hover align-middle mb-0">
    <thead class="table-light">...</thead>
    <tbody>...</tbody>
  </table>
</div>
Bordered & striped
Heading Heading Heading Heading Heading
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Add .table-striped and .table-bordered as needed.
Compact table
#ProductQtyTotal
1Widget A12$120
2Widget B4$48
3Widget C8$96
.table-sm for denser rows.
All Rights Reserved 2026 - 2030