Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Tables

Bootstrap 4 provides a clean layout for building awesome and responsive tables.


Bootstrap 4 Basic Table

By adding the .table class, your table get style with some light padding and horizontal dividers as seen in the following example:

NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
AnkitMumbai9560478555
NancyDelhi9210154545
Run code

You can also invert the colors—with light text on dark backgrounds—with .table-dark class:

NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
AnkitMumbai9560478555
NancyDelhi9210154545
Run code

Striped Rows

By adding the .table-striped class, you will get stripes on rows within the <tbody> as seen in the following example:

NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
AnkitMumbai9560478555
NancyDelhi9210154545
Run code
NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
AnkitMumbai9560478555
NancyDelhi9210154545
Run code


Bordered Table

By adding the .table-bordered class, you will get borders on all sides of the table and cells as seen in the following example:

NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
AnkitMumbai9560478555
NancyDelhi9210154545
Run code
NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
AnkitMumbai9560478555
NancyDelhi9210154545
Run code

Hoverable Rows

By adding the .table-hover class, you will get a hover effect (grey background color) on table rows within a <tbody>:

NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
AnkitMumbai9560478555
NancyDelhi9210154545
Run code
NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
AnkitMumbai9560478555
NancyDelhi9210154545
Run code

Borderless Table

Add .table-borderless class for a table without borders:

NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
AnkitMumbai9560478555
NancyDelhi9210154545
Run code
NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
AnkitMumbai9560478555
NancyDelhi9210154545
Run code

Small Table

Add .table-sm class to make tables more compact by cutting cell padding in half:

NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
AnkitMumbai9560478555
NancyDelhi9210154545
Run code
NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
AnkitMumbai9560478555
NancyDelhi9210154545
Run code

Contextual Classes

Use contextual classes to color table rows or individual cells:

ClassHeadingHeading
ActiveCellCell
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
LightCellCell
DarkCellCell
Run code

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

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles:

#HeadingHeading
1CellCell
2CellCell
3CellCell
4CellCell
5CellCell
6CellCell
7CellCell
8CellCell
9CellCell
Run code

Table Head Options

Similar to tables and dark tables, use the classes .thead-light or .thead-dark to make <thead>s appear light or dark gray:

NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
NameCityPhone
VishalDelhi999945850
EspyMizoram8425896528
MuditJaipur9858621233
Run code

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.

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

The .table-responsive class creates a responsive table: an horizontal scrollbar is added to the table if needed:

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCellCellCellCellCellCell
Run code

You can also pick a breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

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

The .table-responsive-sm creates a responsive table which will scroll horizontally on screens that are less than 576px wide:

Run code