Basic Tables page header description goes here...

Default Table

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

# FIRST NAME LAST NAME USERNAME
1 Abby Barrett @abbeme
2 Danny Collins @dennis
3 Clara Ericson @claris

Table Dark

For inverse version table, add .table-dark to the main table.

# FIRST NAME LAST NAME USERNAME ACTIONS
1 Abby Barrett @abbeme
2 Danny Collins @dennis
3 Clara Ericson @claris
4 Jayden Soto @jayden
5 Dolores Caldwell @dolores
6 Jeremiah Jensen @jeremiah

Bordered Table

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

# FIRST NAME LAST NAME USERNAME
1 Abby Barrett @abbeme
2 Danny Collins @dennis
3 Clara Ericson @claris

Striped Table

Striped tables are styled via the :nth-child CSS selector.

# FIRST NAME LAST NAME USERNAME
1 Abby Barrett @abbeme
2 Danny Collins @dennis
3 Clara Ericson @claris

Table Hover

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

# FIRST NAME LAST NAME USERNAME
1 Abby Barrett @abbeme
2 Danny Collins @dennis
3 Clara Ericson @claris

Small Table

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

# FIRST NAME LAST NAME USERNAME
1 Abby Barrett @abbeme
2 Danny Collins @dennis
3 Clara Ericson @claris

Contextual Classes

Use contextual classes to color table rows or individual cells.

# FIRST NAME LAST NAME USERNAME
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content

With Checkbox

Add .checkbox-col to the column in order to fit the .checkbox or .checkbox-inline with table column

FIRST NAME LAST NAME USERNAME
Abby Barrett @abbeme
Danny Collins @dennis
Clara Ericson @claris

With Radio

For radio button, add .radio-col to the table column.

FIRST NAME LAST NAME USERNAME
Abby Barrett @abbeme
Danny Collins @dennis
Clara Ericson @claris

With Switcher

For checkbox switcher, add .switcher-col to the table column.

FIRST NAME LAST NAME USERNAME
Abby Barrett @abbeme
Danny Collins @dennis
Clara Ericson @claris

With Buttons

For buttons in table column, add .btn-col to the table column.

# FIRST NAME LAST NAME USERNAME ACTIONS
1 Abby Barrett @abbeme
2 Danny Collins @dennis
3 Clara Ericson @claris

With Input

For input box in table column, add .form-col to the table column.

# FIRST NAME LAST NAME USERNAME ACTIONS
1 Barrett @abbeme
2 Collins @dennis
3 Ericson @claris

With Image

For image in table column, add .img-col to the table column.

# FIRST NAME LAST NAME USERNAME
1 Abby Barrett @abbeme
2 Danny Collins @dennis
3 Clara Ericson @claris

For image size control, add .img-lg or .img-sm to the <img>.

# FIRST NAME LAST NAME USERNAME
1 Abby Barrett @abbeme
2 Danny Collins @dennis
3 Clara Ericson @claris
Color Theme
Gradient Theme
Fixed Sidebar
Light Sidebar
Fixed Header
Dark Header
Reset Setting