Table Basic

From now on you will start your activities.

For basic styling—light padding and only horizontal dividers—add the base class .tableto any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Use .table-stripedto add zebra-striping to any table row within the <tbody>.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Add .table-borderlessfor a table without borders.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Add .table-smto make tables more compact by cutting cell padding in half.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

A <caption>functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

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

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Add .table-borderedfor borders on all sides of the table and cells.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Add .table-hoverto enable a hover state on table rows within a <tbody>.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Use contextual classes to color table rows or individual cells.

ClassHeadingHeading
ActiveCellCell
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
LightCellCell
DarkCellCell

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .tablewith .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

ImageNamePhoneStreet Address% ShareCityAction
............
Naeem Khan123 456 7890294-318 Duis Ave
Noakhali
......
Tuhin Sarkar123 456 7890680-1097 Mi Rd.
Lavoir
.........
Tanjil Ahmed456 789 1230Ap #289-8161 In Avenue
Dhaka
.........
Sourav789 123 4560226-4861 Augue. St.
Rongpur
............
Jahangir Alam(01662) 590833219 Elit Avenue
Chittagong
.........
Brielle Williamson123 456 7890Dhaka-1229, Bangladesh
Barisal