WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Tables


Bootstrap Basic Table

Bootstrap4 uses the .table class to set the style of the basic table. An example is as follows:

Example

Firstname Lastname Email
Valerie Reed ValerieLReed@rhyta.com
Thomas Ramos ThomasCRamos@teleworm.us
Ruben Fair RubenSFair@teleworm.us
Try it Yourself »

Striped Rows

By adding the . Table-striped class, you will <tbody> Streaks are seen on the inner rows, as shown in the example below´╝Ü

Example

Firstname Lastname Email
Valerie Reed ValerieLReed@rhyta.com
Thomas Ramos ThomasCRamos@teleworm.us
Ruben Fair RubenSFair@teleworm.us
Try it Yourself »

Bordered Table

The .table-bordered class adds borders to tables:

Example

Firstname Lastname Email
Valerie Reed ValerieLReed@rhyta.com
Thomas Ramos ThomasCRamos@teleworm.us
Ruben Fair RubenSFair@teleworm.us
Try it Yourself »

Hover Rows

The .table-hover class adds a mouseover effect (grey background) to each row of the table:

Example

Firstname Lastname Email
Valerie Reed ValerieLReed@rhyta.com
Thomas Ramos ThomasCRamos@teleworm.us
Ruben Fair RubenSFair@teleworm.us
Try it Yourself »

Condensed Table

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

Example

Firstname Lastname Email
Valerie Reed ValerieLReed@rhyta.com
Thomas Ramos ThomasCRamos@teleworm.us
Ruben Fair RubenSFair@teleworm.us
Try it Yourself »

Contextual Classes

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

Example

Firstname Lastname Email
Valerie Reed ValerieLReed@rhyta.com
Thomas Ramos ThomasCRamos@teleworm.us
Ruben Fair RubenSFair@teleworm.us
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 is used to create a responsive table: a horizontal scroll bar is created when the screen width is less than 992px, and different effects are displayed if the visible area width is greater than 992px (no scroll bar):

Example

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

You can set the scroll bar to display at the specified screen width through the following classes:

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