Default tables

The Right Way - Admin Template

Default table

Add .table class to basic <table> to get styled table.

NameSpentNicknameStatus
John Doe$5,350@johndoeActive
Sarah Birmington$1,220@sarahbirmActive
Josh Volkowic$2,591@volkowicRemoved
Elisabeth Konnor$9,111@e_konnorPending

Stripped

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

NameSpentNicknameStatus
John Doe$5,350@johndoeActive
Sarah Birmington$1,220@sarahbirmActive
Josh Volkowic$2,591@volkowicRemoved
Elisabeth Konnor$9,111@e_konnorPending

Bordered table

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

NameSpentNicknameStatus
John Doe$5,350@johndoeActive
Sarah Birmington$1,220@sarahbirmActive
Josh Volkowic$2,591@volkowicRemoved
Elisabeth Konnor$9,111@e_konnorPending

Hoverable rows

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

NameSpentNicknameStatus
John Doe$5,350@johndoeActive
Sarah Birmington$1,220@sarahbirmActive
Josh Volkowic$2,591@volkowicRemoved
Elisabeth Konnor$9,111@e_konnorPending

Indent rows

Add .table-indent-rows to get margins between rows.

NameSpentNicknameStatus
John Doe$5,350@johndoeActive
Sarah Birmington$1,220@sarahbirmActive
Josh Volkowic$2,591@volkowicRemoved
Elisabeth Konnor$9,111@e_konnorPending
Hoverable rows

Also supports every modifier that you can use in default table.

NameSpentNicknameStatus
John Doe$5,350@johndoeActive
Sarah Birmington$1,220@sarahbirmActive
Josh Volkowic$2,591@volkowicRemoved
Elisabeth Konnor$9,111@e_konnorPending

Table as card component

Do not wrap it with .card-body.

NameSpentNicknameStatus
John Doe$5,350@johndoeActive
Sarah Birmington$1,220@sarahbirmActive
Josh Volkowic$2,591@volkowicRemoved
Elisabeth Konnor$9,111@e_konnorPending

Table head options

Use .thead-dark or .thead-light to customize your table th.

NameSpentNicknameStatus
John Doe$5,350@johndoeActive
Sarah Birmington$1,220@sarahbirmActive
NameSpentNicknameStatus
John Doe$5,350@johndoeActive
Sarah Birmington$1,220@sarahbirmActive

Dark style

You can invert colors using .table-dark class, or wrap this table into .inverted container.

NameSpentNicknameStatus
John Doe$5,350@johndoeActive
Sarah Birmington$1,220@sarahbirmActive
Josh Volkowic$2,591@volkowicRemoved
Elisabeth Konnor$9,111@e_konnorPending
Template settings
Information

Use this panel to configure template settings and layout options.

Layout option
Backgrounds
Header options
Container
Navigation options
Sidepanel options
Content options