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 INVERSE

For inverse version table, add .table-inverse 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

HOVER ROWS

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

CONDENSED TABLE

Add .table-condensed 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 BUTTONS

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 INPUTBOX

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
Reset Setting