Bootstrap 4
BS Table
Previous Page
Next Page

Bootstrap 4 Tables

Bootstrap 4 tables are generally a series of rows and columns that contains data inside a table cell. Bootstrap table class is used to enhance the table layout and also make it device friendly i.e responsive.

Basic Table

To create bootstrap basic table, assign.table class to the <table> base class.

General Syntax 

      <table class="table"></table>
Try it now

Source Code 

          <div class="mt-5">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Work</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Smith</td>
        <td>Jane</td>
        <td>Web Designer</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <td>Graphics Designer</td>
      </tr>
    </tbody>
  </table>
</div>
Try it now

Source Code: Output

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer

Note:Bootstrap basic table is created easily ,by assigning .table to the <table> base class.

Dark table

Assign .table & .table-dark to the <table> base class to create dark background of the table.

General Syntax 

      <table class="table table-dark">  </table>
Try it now

Source Code 

          <div class="mt-5">
  <h2 class="pt-5 mb-5">Bootstrap Dark Table</h2>
  <table class="table table-dark">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Work</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Smith</td>
        <td>Jane</td>
        <td>Web Designer</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <td>Graphics Designer</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Andre</td>
        <td>Ren</td>
        <td>Developer</td>
      </tr>
    </tbody>
  </table>
</div>
<!--/container-->
Try it now

Source Code: Output

Bootstrap Dark Table

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Andre Ren Developer

Note: To create table with dark background,assign .table & .dark-table to the <table> base class.

Table Stripped Row

To create bootstrap stripped row, assign .table-striped class to <table> element base class.These class adds zebra-stripes to a table.

General Syntax 

      <table class="table table-striped"></table>
Try it now

Source Code 

          <div class="mt-5">
  <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Work</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Smith</td>
        <td>Jane</td>
        <td>Web Designer</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <td>Graphics Designer</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Andre</td>
        <td>Ren</td>
        <td>Developer</td>
      </tr>
    </tbody>
  </table>
</div>
Try it now

Source Code: Output

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Andre Ren Developer

Note:Stripped row of table can be created by assigning .table , & .table-striped to the <table> element base class.

Bordered Table

Assign .table-bordered class to <table> element base class.This class adds borders on all sides of the table and cells.

General Syntax 

      <table class="table table-bordered"> </table>
Try it now

Source Code 

          <div class="mt-5">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Work</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Smith</td>
        <td>Jane</td>
        <td>Web Designer</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <td>Graphics Designer</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Andre</td>
        <td>Ren</td>
        <td>Developer</td>
      </tr>
    </tbody>
  </table>
</div>
Try it now

Source Code: Output

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Andre Ren Developer

Note:Bootstrap bordered table can be created very easily by assigning .table & .bordered-table class to the <table> element base class.

Bootstrap Responsive Table

Assign .table-responsive class to the <table> element base class to create responsive table.Basically, it adds a horizontal scrollbar when the content size is too big horizontally.

General Syntax 

      <table class="table table-responsive ">  </table>
Try it now

Source Code 

          <div class="mt-5">
  <table class="table table-responsive">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Work</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Smith</td>
        <td>Jane</td>
        <td>Web Designer</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <td>Graphics Designer</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Andre</td>
        <td>Ren</td>
        <td>Developer</td>
      </tr>
    </tbody>
  </table>
</div>
Try it now

Source Code: Output

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Andre Ren Developer

Note: To create bootstrap responsive table,assign .table , .table-responsive to the <table> base class.

Bootstrap Table Head Color

To provide table head color,assign either .table-light or .table-dark class to <thead> element base class.The .table-light class is used to create light table head while .table-dark class is used to create dark table head.

General Syntax 

      <thead class="table-light"></thead>
Try it now

Source Code 

          <div class="mt-5">
  <table class="table">
    <thead class="table-light">
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Work</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Smith</td>
        <td>Jane</td>
        <td>Web Designer</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <td>Graphics Designer</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Oliza</td>
        <td>Ren</td>
        <td>Developer</td>
      </tr>
    </tbody>
  </table>
</div>
Try it now

Source Code: Output

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Oliza Ren Developer

Note: The .table-light & .table-dark classes are used to create light and dark table head correspondingly.

Table Contextual Classes

General Syntax 

      <tr class="table-primary">  </tr>
Try it now

Source Code 

          <div class="mt-5">
  <table class="table table-primary">
    <thead class="table-light">
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Work</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-success">
        <td>1</td>
        <td>Smith</td>
        <td>Jane</td>
        <td>Web Designer</td>
      </tr>
      <tr class="table-info">
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <td>Graphics Designer</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Oliza</td>
        <td>Ren</td>
        <td>Developer</td>
      </tr>
    </tbody>
  </table>
</div>
<!--/container-->
Try it now

Source Code: Output

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Oliza Ren Developer

Note: To provide table background color,assign table contextual classes to the <table> element base class.

Online Test / Quiz

Question set 1

Web Tutorials

Bootstrap 4 Tables
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Tutorials
HTML JAVASCRIPT CSS BOOTSTRAP 5
Performance Evalution
HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
Practical Approach
Coaching Software Computer Software Skill Management Software School Management Software