| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jhon | Stone | @jhon |
| 2 | Lisa | Nilson | @lisa |
| 3 | Larry | the Bird |
Page sub tittle
FATbit extends
For more info please visit the plugin's Documentation.
Bootstrap Table component with a variety of options to provide uniquely looking Table component that matches the FATbit's design standards.For more info please visit the plugin's Documentation.
Basic Tables
Using the most basic table markup, here’s how tables look in FATbit:
You can also invert the colors—with light text on dark backgrounds—with
.table-dark.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jhon | Stone | @jhon |
| 2 | Lisa | Nilson | @lisa |
| 3 | Larry | the Bird |
Table Head Options
Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear light or dark gray.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jhon | Stone | @jhon |
| 2 | Lisa | Nilson | @lisa |
| 3 | Larry | the Bird |
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jhon | Stone | @jhon |
| 2 | Lisa | Nilson | @lisa |
| 3 | Larry | the Bird |
Small Table
Add
.table-sm to make tables more compact by cutting cell padding in half.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jhon | Stone | @jhon |
| 2 | Lisa | Nilson | @lisa |
| 3 | Larry | the Bird |
Striped Rows
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jhon | Stone | @jhon |
| 2 | Lisa | Nilson | @lisa |
| 3 | Larry | the Bird |
Bordered Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jhon | Stone | @jhon |
| 2 | Lisa | Nilson | @lisa |
| 3 | Larry | the Bird |
Hoverable Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jhon | Stone | @jhon |
| 2 | Lisa | Nilson | @lisa |
| 3 | Larry | the Bird |
Table Row States
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jhon | Stone | @jhon |
| 2 | Lisa | Nilson | @lisa |
| 3 | Larry | the Bird | |
| 4 | Nick | looper | @king |
| 5 | Joan | thestar | @joan |
| 6 | Sean | coder | @coder |
Responsive tables
Create responsive tables by wrapping any table with
.table-responsive DIV to make them scroll horizontally on small devices (under 768px)| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
