Tutorials Tonight's Logo
Follow Us

BOOTSTRAP 4 TABLE


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:

  1. Use .table class to create a basic bootstrap table.
  2. To create border around table and cell use .table-bordered class.
  3. To get zebra-strips on row use .table-striped class.
  4. For borderless table use .table-borderless class.
  5. .table-hover creates a hover effect on the table.
  6. Use .table-dark class to create a dark table.
  7. 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

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.