Bootstrap 4 Basic Table

Introduction

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

The .table class adds basic styling to a table:

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Striped Rows

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

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Bordered Table

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

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Hover Rows

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

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Black/Dark Table

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

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Dark Striped Table

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

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Hoverable Dark Table

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

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Borderless Table

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

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Contextual Classes

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

Example

FirstnameLastnameEmail
DefaultDefaultsondef@somemail.com
PrimaryJoejoe@example.com
SuccessDoejohn@example.com
DangerMoemary@example.com
InfoDooleyjuly@example.com
WarningRefsbo@example.com
ActiveActivesonact@example.com
SecondarySecondsonsec@example.com
LightAngieangie@example.com
DarkBobo@example.com

The contextual classes that can be used are:

ClassDescription
.table-primaryBlue: Indicates an important action
.table-successGreen: Indicates a successful or positive action
.table-dangerRed: Indicates a dangerous or potentially negative action
.table-infoLight blue: Indicates a neutral informative change or action
.table-warningOrange: Indicates a warning that might need attention
.table-activeGrey: Applies the hover color to the table row or table cell
.table-secondaryGrey: Indicates a slightly less important action
.table-lightLight grey table or table row background
.table-darkDark grey table or table row background

Table Head Colors

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

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com
FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Small table

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

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Responsive Tables

The .table-responsive the class creates a responsive table: a horizontal scrollbar is added to the table on screens that are less than 992px wide (if needed). When viewing on anything larger than 992px wide, there is no difference:

Example

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

ClassScreen 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>

Leave a Comment

Crypto logo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus cursus rutrum est nec suscipit. Ut et ultrices nisi. Vivamus id nisl ligula. Nulla sed iaculis ipsum.

Contact

Company Name

Address