Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 4 Tables


Bootstrap 4 Basic Table

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

The .table class adds basic styling to a table:

Example

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Try it Yourself »

Striped Rows

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

Example

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
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 john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
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 john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Try it Yourself »

Black/Dark Table

The .table-dark class adds a black background to the table:

Example

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Try it Yourself »

Dark Striped Table

Combine .table-dark and .table-striped to create a dark, striped table:

Example

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Try it Yourself »

Hoverable Dark Table

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

Example

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Try it Yourself »

Borderless Table

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

Example

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Try it Yourself »

Contextual Classes

Contextual classes can be used to color the whole table (<table>),  the table rows (<tr>) or table cells (<td>).

Example

Firstname Lastname Email
Default Defaultson def@somemail.com
Primary Joe joe@example.com
Success Doe john@example.com
Danger Moe mary@example.com
Info Dooley july@example.com
Warning Refs bo@example.com
Active Activeson act@example.com
Secondary Secondson sec@example.com
Light Angie angie@example.com
Dark Bo bo@example.com
Try it Yourself »

The contextual classes that can be used are:

Class Description
.table-primary Blue: Indicates an important action
.table-success Green: Indicates a successful or positive action
.table-danger Red: Indicates a dangerous or potentially negative action
.table-info Light blue: Indicates a neutral informative change or action
.table-warning Orange: Indicates a warning that might need attention
.table-active Grey: Applies the hover color to the table row or table cell
.table-secondary Grey: Indicates a slightly less important action
.table-light Light grey table or table row background
.table-dark Dark grey table or table row background

Table Head Colors

The .thead-dark class adds a black background to table headers, and the .thead-light class adds a grey background to table headers:

Example

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Try it Yourself »

Small table

The .table-sm class makes the table smaller by cutting cell padding in half:

Example

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Try it Yourself »

Responsive Tables

The .table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally):

Example

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

You can also decide when the table should get a scrollbar, depending on screen width:

Class Screen width
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px

Example

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

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.