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 .invert
ed 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 |