Please note, this is a STATIC archive of website www.w3schools.com from 05 May 2020, cach3.com does not collect or store any user information, there is no "phishing" involved.
THE WORLD'S LARGEST WEB DEVELOPER SITE
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO W3.CSS JQUERY JAVA MORE FORUM EXERCISES REFERENCES

Bootstrap Tables

❮ Previous Next ❯

Bootstrap Basic Table

A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table:

Example

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Try it Yourself »

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Example

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Try it Yourself »

Bordered Table

The .table-bordered class adds borders on all sides of the table and cells:

Example

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Try it Yourself »

Hover Rows

The .table-hover class adds a hover effect (grey background color) on table rows:

Example

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Try it Yourself »

Condensed Table

The .table-condensed class makes a table more compact by cutting cell padding in half:

Example

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Try it Yourself »

Contextual Classes

Contextual classes can be used to color table rows (<tr>) or table cells (<td>):

Example

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]
Try it Yourself »

The contextual classes that can be used are:

Class Description
.active Applies the hover color to the table row or table cell
.success Indicates a successful or positive action
.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action

Responsive Tables

The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:

Example

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
Try it Yourself »

Test Yourself With Exercises

Exercise:

Add a class attribute to style the table as a basic Bootstrap table.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

Start the Exercise

Complete Bootstrap Table Reference

For a complete reference of all table classes, go to our complete Bootstrap Tables Reference.


❮ Previous Next ❯