Our framework comes packed with a lot of table options variations.
To apply the basic table styling you need to add the .table CSS class to any table element.
| # | Row 1 | Row 2 | Row 3 |
|---|---|---|---|
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
To create a condensed table add the .table-condensed CSS class to the .table wrapper.
| # | Row 1 | Row 2 | Row 3 |
|---|---|---|---|
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
To create a bordered table add the .table-bordered CSS class to the .table wrapper.
| # | Row 1 | Row 2 | Row 3 |
|---|---|---|---|
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
To create a striped-row table add the .table-striped CSS class to the .table wrapper.
| # | Row 1 | Row 2 | Row 3 |
|---|---|---|---|
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
To create hover table rows add the .table-hover CSS class to the .table wrapper.
| # | Row 1 | Row 2 | Row 3 |
|---|---|---|---|
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
To create a basic responsive table wrap the .table element inside a div with the .table-responsive CSS class.
| # | Row 1 | Row 2 | Row 3 |
|---|---|---|---|
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
| # | Row 1 | Row 2 | Row 3 |
On the other hand, we denounce...
Dislike men who are so beguiled...
Of pleasure of the moment, so...
That they cannot foresee the...
Pain and trouble that are bound...
Equal blame belongs to those...
Weakness of will, which is same...
These cases are perfectly simple...
