• More Theme Elements
• Alerts
• Animations
• Avatars
• Badges
• Button Groups
• Buttons
• Cards
• Carousels
• Collapse / Accordions
• Colours Utils
• Cookie Banners
• Counters
• Call To Action Blocks
• Dividers
• Dropdowns
• Forms
• Forms Input Groups
• Icons
  • Icon Utils/Overview
  • Icons: Bootstrap
  • Icons: Flags
  • Icons: Font Awesome
  • Icons: Ionicons
  • Icons: Linearicons
  • Icons: Line Awesome
• List Groups
• Modals
• Modals Onload
• Navs
• Tabbable Navs
• Overlays
• Progress Bars
• Select Picker
• Shadows
• Social Media Branding
• Spacers
• Spinners
• Tables
• Toasts
• Tooltips & Popovers
• Type Effect
• Typography
• Utilities
• Video Blocks
• Page Titles

Default Styles

Add the class .table to opt-in to the default table styling.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

---

Inverse Table

Add the class .table-dark to inverse the table styling.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

---

Striped rows

Add the class .table-striped to apply alternating table row background colours. Works with both default and inverse tables.

Default

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Dark striped

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

---

Bordered table

Add the class .table-bordered to apply borders to the table and table rows. Works with both default and inverse tables.

Default

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Inverse bordered

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

---

Hoverable rows

Add the class .table-hover to apply a hover effect to rows when they are hovered. Works with both default and inverse tables.

Default

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Inverse hoverable rows

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

---

Small Tables

Add the class .table-sm to apply more compact padding to table cells. Works with both default and inverse tables.

Default

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Inverse small table

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

---

Table head

Add the classes .thead-default or .thead-inverse to alter the background colour of thead elements.

Default

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Inverse table head

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

---

Table row & cell colours

On non-inverse tables you can apply the follow classes to either tr or td or th elements to change the background colour.

Class	Column heading	Column heading
.table-active	Column content	Column content
.table-primary	Column content	Column content
.table-secondary	Column content	Column content
.table-info	Column content	Column content
.table-success	Column content	Column content
.table-warning	Column content	Column content
.table-danger	Column content	Column content
.table-dark	Column content	Column content
.table-light	Column content	Column content

Inverse table row & cell colours

Inverse tables can use the contextual background colours to alter tr or td or th background colours.

Class	Column heading	Column heading
.bg-primary	Column content	Column content
.bg-info	Column content	Column content
.bg-success	Column content	Column content
.bg-warning	Column content	Column content
.bg-danger	Column content	Column content

---

Responsive Tables

Add a wrapper with the class .table-responsive to make tables scrollable horizontally on small screenwidths. Resize the screen to see the example below.

---

Vertical alignment

You acn set the vertical alignment of table cell & head content using these classes.

align-baseline

align-top

align-middle

align-bottom

align-text-top

align-text-bottom