Basic Table Example

Examples for opt-in styling of tables with Bootstrap. Just add the base class .table to any <table> tag, then extend with custom styles or our various included modifier classes.

Table Default

Using the most basic table markup, here’s how .table based tables look by default.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Code Example
<table class="table">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First</th>      <th scope="col">Last</th>      <th scope="col">Handle</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">1</th>      <td>Mark</td>      <td>Otto</td>      <td>@mdo</td>    </tr>    <tr>      <th scope="row">2</th>      <td>Jacob</td>      <td>Thornton</td>      <td>@fat</td>    </tr>    <tr>      <th scope="row">3</th>      <td>Larry</td>      <td>the Bird</td>      <td>@twitter</td>    </tr>  </tbody></table>

Table Head Options

Similar to others table, use the modifier classes .table-light or .thead-dark to make <thead> appear light or dark.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Code Example
<table class="table">  <thead class="table-light">    <tr>      <th scope="col">#</th>      <th scope="col">First</th>      <th scope="col">Last</th>      <th scope="col">Handle</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">1</th>      <td>Mark</td>      <td>Otto</td>      <td>@mdo</td>    </tr>    <tr>      <th scope="row">2</th>      <td>Jacob</td>      <td>Thornton</td>      <td>@fat</td>    </tr>    <tr>      <th scope="row">3</th>      <td>Larry</td>      <td>the Bird</td>      <td>@twitter</td>    </tr>  </tbody></table>
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Code Example
  <table class="table">    <thead class="thead-dark">      <tr>        <th scope="col">#</th>        <th scope="col">First</th>        <th scope="col">Last</th>        <th scope="col">Handle</th>      </tr>    </thead>    <tbody>      <tr>        <th scope="row">1</th>        <td>Mark</td>        <td>Otto</td>        <td>@mdo</td>      </tr>      <tr>        <th scope="row">2</th>        <td>Jacob</td>        <td>Thornton</td>        <td>@fat</td>      </tr>      <tr>        <th scope="row">3</th>        <td>Larry</td>        <td>the Bird</td>        <td>@twitter</td>      </tr>    </tbody>  </table>  

Table Striped Rows

Use .table-stripped class in <table> tag to make zebra stripping on table row.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Code Example
<table class="table table-striped">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First</th>      <th scope="col">Last</th>      <th scope="col">Handle</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">1</th>      <td>Mark</td>      <td>Otto</td>      <td>@mdo</td>    </tr>    <tr>      <th scope="row">2</th>      <td>Jacob</td>      <td>Thornton</td>      <td>@fat</td>    </tr>    <tr>      <th scope="row">3</th>      <td>Larry</td>      <td>the Bird</td>      <td>@twitter</td>    </tr>  </tbody></table>

Bordered Table

Use .table-bordered class in <table> tag to make every cell bordered.

#First NameLast Name
1MarkOtto
2JacobThornton
3Larrythe Bird
Code Example
<table class="table table-bordered">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First Name</th>      <th scope="col">Last Name</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">1</th>      <td>Mark</td>      <td>Otto</td>    </tr>    <tr>      <th scope="row">2</th>      <td>Jacob</td>      <td>Thornton</td>    </tr>    <tr>      <th scope="row">3</th>      <td>Larry</td>      <td>the Bird</td>    </tr>  </tbody></table>

Borderless Table

Use .table-borderless class in <table> tag to remove every cell border.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Code Example
<table class="table table-borderless">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First</th>      <th scope="col">Last</th>      <th scope="col">Handle</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">1</th>      <td>Mark</td>      <td>Otto</td>      <td>@mdo</td>    </tr>    <tr>      <th scope="row">2</th>      <td>Jacob</td>      <td>Thornton</td>      <td>@fat</td>    </tr>    <tr>      <th scope="row">3</th>      <td>Larry</td>      <td>the Bird</td>      <td>@twitter</td>    </tr>  </tbody></table>

Table Hoverable Row

Use .table-hover class in <table> to enable a hover state on table rows.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Code Example
<table class="table table-hover">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First</th>      <th scope="col">Last</th>      <th scope="col">Handle</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">1</th>      <td>Mark</td>      <td>Otto</td>      <td>@mdo</td>    </tr>    <tr>      <th scope="row">2</th>      <td>Jacob</td>      <td>Thornton</td>      <td>@fat</td>    </tr>    <tr>      <th scope="row">3</th>      <td>Larry</td>      <td>the Bird</td>      <td>@twitter</td>    </tr>  </tbody></table>

Small Table

Add .table-sm to get more small table.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Code Example
<table class="table table-sm">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First</th>      <th scope="col">Last</th>      <th scope="col">Handle</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">1</th>      <td>Mark</td>      <td>Otto</td>      <td>@mdo</td>    </tr>    <tr>      <th scope="row">2</th>      <td>Jacob</td>      <td>Thornton</td>      <td>@fat</td>    </tr>    <tr>      <th scope="row">3</th>      <td>Larry</td>      <td>the Bird</td>      <td>@twitter</td>    </tr>  </tbody></table>

Responsive Tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
Code Example
<div class="table-responsive">  <table class="table">    ...  </table></div>
Switch Demo Layout
Use Case Concept
Preview Settings
Main UI Style
Default
Clean
Sidebar Style
White
Light
Dark
Theme
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Looking for Coronavirus Real & Live Data Tracking Dashboard? Check out
CovStats
Looking for Coronavirus
Live Data Dashboard?