Default tables
The Right Way - Admin Template
Default table
Add .table class to basic
<table> to get styled table.
| Name | Spent | Nickname | Status | |
|---|---|---|---|---|
| John Doe | $5,350 | @johndoe | Active | |
| Sarah Birmington | $1,220 | @sarahbirm | Active | |
| Josh Volkowic | $2,591 | @volkowic | Removed | |
| Elisabeth Konnor | $9,111 | @e_konnor | Pending |
Stripped
Use .table-striped to add zebra-striping
to any table row within the <tbody>.
| Name | Spent | Nickname | Status | |
|---|---|---|---|---|
| John Doe | $5,350 | @johndoe | Active | |
| Sarah Birmington | $1,220 | @sarahbirm | Active | |
| Josh Volkowic | $2,591 | @volkowic | Removed | |
| Elisabeth Konnor | $9,111 | @e_konnor | Pending |
Bordered table
Add .table-bordered for borders on all
sides of the table and cells.
| Name | Spent | Nickname | Status | |
|---|---|---|---|---|
| John Doe | $5,350 | @johndoe | Active | |
| Sarah Birmington | $1,220 | @sarahbirm | Active | |
| Josh Volkowic | $2,591 | @volkowic | Removed | |
| Elisabeth Konnor | $9,111 | @e_konnor | Pending |
Hoverable rows
Add .table-hover to enable a hover state
on table rows within a <tbody>.
| Name | Spent | Nickname | Status | |
|---|---|---|---|---|
| John Doe | $5,350 | @johndoe | Active | |
| Sarah Birmington | $1,220 | @sarahbirm | Active | |
| Josh Volkowic | $2,591 | @volkowic | Removed | |
| Elisabeth Konnor | $9,111 | @e_konnor | Pending |
Indent rows
Add .table-indent-rows to get margins
between rows.
| Name | Spent | Nickname | Status | |
|---|---|---|---|---|
| John Doe | $5,350 | @johndoe | Active | |
| Sarah Birmington | $1,220 | @sarahbirm | Active | |
| Josh Volkowic | $2,591 | @volkowic | Removed | |
| Elisabeth Konnor | $9,111 | @e_konnor | Pending |
Hoverable rows
Also supports every modifier that you can use in default table.
| Name | Spent | Nickname | Status | |
|---|---|---|---|---|
| John Doe | $5,350 | @johndoe | Active | |
| Sarah Birmington | $1,220 | @sarahbirm | Active | |
| Josh Volkowic | $2,591 | @volkowic | Removed | |
| Elisabeth Konnor | $9,111 | @e_konnor | Pending |
Table as card component
Do not wrap it with .card-body.
| Name | Spent | Nickname | Status | |
|---|---|---|---|---|
| John Doe | $5,350 | @johndoe | Active | |
| Sarah Birmington | $1,220 | @sarahbirm | Active | |
| Josh Volkowic | $2,591 | @volkowic | Removed | |
| Elisabeth Konnor | $9,111 | @e_konnor | Pending |
Table head options
Use .thead-dark or
.thead-light to customize your table th.
| Name | Spent | Nickname | Status | |
|---|---|---|---|---|
| John Doe | $5,350 | @johndoe | Active | |
| Sarah Birmington | $1,220 | @sarahbirm | Active |
| Name | Spent | Nickname | Status | |
|---|---|---|---|---|
| John Doe | $5,350 | @johndoe | Active | |
| Sarah Birmington | $1,220 | @sarahbirm | Active |
Dark style
You can invert colors using .table-dark
class, or wrap this table into .inverted container.
| Name | Spent | Nickname | Status | |
|---|---|---|---|---|
| John Doe | $5,350 | @johndoe | Active | |
| Sarah Birmington | $1,220 | @sarahbirm | Active | |
| Josh Volkowic | $2,591 | @volkowic | Removed | |
| Elisabeth Konnor | $9,111 | @e_konnor | Pending |