BOOTSTRAP 4 TABLE

❮ Prev Next ❯

The Bootstrap provides a bunch of classes to style your HTML table and enhance its look. This section covers bootstrap table styling with examples.

Bootstrap Table

Use of table is widespread like in calendars, date picker, telephone directory, etc so, bootstrap has designed its table to be very flexible.

To create a basic table use .table class on your HTML table. It creates a light padding and horizontal dividers

Id	User	Age
A1	Jean	25
A2	Leo	32
A3	Jimmy	21

<table class="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>

▶ Run the code

Bordered Table

To create border around table and in cells use .table-bordered class together with .table class.

Id	User	Age
A1	Jean	25
A2	Leo	32
A3	Jimmy	21

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>

▶ Run the code

Bordered Striped

To create zebra strip like appearance on even rows use .table-striped class on table.

Id	User	Age
A1	Jean	25
A2	Leo	32
A3	Jimmy	21

<table class="table table-striped">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>

▶ Run the code

Bootstrap Table Hover

The class .table-hover enables a hover effect on table row within <tbody>.

Id	User	Age
A1	Jean	25
A2	Leo	32
A3	Jimmy	21

<table class="table table-hover">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>

▶ Run the code

Bootstrap Table Borderless

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

Id	User	Age
A1	Jean	25
A2	Leo	32
A3	Jimmy	21

<table class="table table-borderless">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>

▶ Run the code

Dark Table

You can create dark background and light text table by adding an extra bootstrap class .table-dark to <table> element.

Id	User	Age
A1	Jean	25
A2	Leo	32
A3	Jimmy	21

<table class="table table-dark">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>

▶ Run the code

You can also use .table-stripped, .table-bordered, .table-hover and .table-borderless with .table-dark class to get those effect in dark table.

Here is an example of dark table hover.

Id	User	Age
A1	Jean	25
A2	Leo	32
A3	Jimmy	21

<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>

▶ Run the code

Dark and Light Table Head

Similarly, like the dark and light table, you can create a dark head and light head using bootstrap classes.

To create dark head use .thead-dark class and to create light head use .thead-light class in <thead> tag.

Id	User	Age
A1	Jean	25
A2	Leo	32
A3	Jimmy	21

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>

▶ Run the code

Points to remember:

Use .table class to create a basic bootstrap table.
To create border around table and cell use .table-bordered class.
To get zebra-strips on row use .table-striped class.
For borderless table use .table-borderless class.
.table-hover creates a hover effect on the table.
Use .table-dark class to create a dark table.
For creating the dark head of table use .thead-dark and to get light head use .thead-light in <thead> tag.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Bootstrap 4 Alert

❮ Prev Next ❯