Tables

Tables can be used to represent tabular data using rows and columns. They can be created by adding the .table class to the <table> element.

# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>

It is generally a good idea to align numerical columns to the right. Hence, the .text-right utility class is on the Age column.

No outer padding #

The padding on the left of the first column and the padding on the right of the last column can be removed by adding the .table-no-outer-padding class to the <table> element.

# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33
<!-- No outer padding -->
<table class="table table-no-outer-padding">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>

Striped rows #

Tables can be created with zebra-striping by adding the .table-striped class.

# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33
<!-- Striped rows -->
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>

Hoverable rows #

A hover state can be enabled within table rows in the <tbody> element by adding the .table-hover class.

# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33
<!-- Hoverable rows -->
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>

Bordered tables #

Bordered tables can be created using the following classes:

  • .table-bordered creates fully bordered tables (both outer and inner)
  • .table-outer-bordered creates tables with an outer border only.
  • .table-inner-bordered creates tables with inner borders only. This can be paired with cards with no padding for a great effect. Check out the responsive tables section to see how.
# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33
<!-- Bordered table -->
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>
# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33
<!-- Outer bordered table -->
<table class="table table-outer-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>
# First Last Age
1 John Doe 25
2 Jane Violet 27
3 Jack Gates 33
<!-- Inner bordered table -->
<table class="table table-inner-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>

Contextual classes #

Rows with context can be created by adding the appropriate class names to the <tr> elements. Please note that this only works for rows in the table's body, ie, <tbody>.

# Row type Heading
1 Default Cell
2 Primary Cell
3 Success Cell
4 Secondary Cell
5 Danger Cell
<!-- Contextual classes -->
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Row type</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Default</td>
      <td>Cell</td>
    </tr>
    <tr class="table-primary">
      <th>2</th>
      <td>Primary</td>
      <td>Cell</td>
    </tr>
    <tr class="table-success">
      <th>3</th>
      <td>Success</td>
      <td>Cell</td>
    </tr>
    <tr class="table-secondary">
      <th>4</th>
      <td>Secondary</td>
      <td>Cell</td>
    </tr>
    <tr class="table-danger">
      <th>5</th>
      <td>Danger</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

Responsive tables #

Tables can be made responsive by adding the .table-responsive class to a container element containing a table.

# Heading Heading Heading Heading
1 Cell Cell Cell Cell
2 Cell Cell Cell Cell
3 Cell Cell Cell Cell
4 Cell Cell Cell Cell
<!-- Responsive table -->
<div class="w-400 mw-full"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
  <div class="card p-0 bg-very-dark-dm"> <!-- p-0 = padding: 0, bg-very-dark-dm = background-color: var(--dark-color-dark) only in dark mode -->
    <div class="table-responsive">
      <table class="table table-inner-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>1</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
          </tr>
          <tr>
            <th>2</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
          </tr>
          <tr>
            <th>3</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
          </tr>
          <tr>
            <th>4</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Up next: Form

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.