Table Basic
Using the most basic table Leanne Grahamup, here’s how .table
-based tables look in Bootstrap. You
can use any example of below table for your table and it can be use with any type of bootstrap tables.
Project | Client | Users | Status | Actions |
---|---|---|---|---|
Angular Project | Peter Charls |
|
Active |
|
React Project | Ronald Frest |
|
Completed |
|
Vuejs Project | Jack Obes |
|
Scheduled |
|
Bootstrap Project | Jerry Milton |
|
Pending |
|
Dark Table
You can also invert the colors—with light text on dark backgrounds—with .table-dark
class with
.table
class.
Project | Client | Users | Status | Actions |
---|---|---|---|---|
Angular Project | Peter Charls |
|
Active |
|
React Project | Ronald Frest |
|
Completed |
|
Vuejs Project | Jack Obes |
|
Scheduled |
|
Bootstrap Project | Jerry Milton |
|
Pending |
|
Table head options
Similar to tables and dark tables, use the modifier classes
.thead-dark
to make
<thead>
s appear dark.
Project | Client | Users | Status | Actions |
---|---|---|---|---|
Angular Project | Peter Charls |
|
Active |
|
React Project | Ronald Frest |
|
Completed |
|
Vuejs Project | Jack Obes |
|
Scheduled |
|
Bootstrap Project | Jerry Milton |
|
Pending |
|
Use the modifier class .thead-light
to make
<thead>
s appear light.
Project | Client | Users | Status | Actions |
---|---|---|---|---|
Angular Project | Peter Charls |
|
Active |
|
React Project | Ronald Frest |
|
Completed |
|
Vuejs Project | Jack Obes |
|
Scheduled |
|
Bootstrap Project | Jerry Milton |
|
Pending |
|
Striped rows
Use .table-striped
to add zebra-striping to any table row within the
<tbody>
. This styling doesn't work in IE8 and below as
:nth-child
CSS selector isn't supported.
Project | Client | Users | Status | Actions |
---|---|---|---|---|
Angular Project | Peter Charls |
|
Active |
|
React Project | Ronald Frest |
|
Completed |
|
Vuejs Project | Jack Obes |
|
Scheduled |
|
Bootstrap Project | Jerry Milton |
|
Pending |
|
Striped rows with inverse dark
Use .table-dark
with .table-striped
to add zebra-striping to any inverse table row
within the <tbody>
. This styling doesn't work in IE8 and below as
:nth-child
CSS selector isn't supported.
Project | Client | Users | Status | Actions |
---|---|---|---|---|
Angular Project | Peter Charls |
|
Active |
|
React Project | Ronald Frest |
|
Completed |
|
Vuejs Project | Jack Obes |
|
Scheduled |
|
Bootstrap Project | Jerry Milton |
|
Pending |
|
Bordered table
Add .table-bordered
for borders on all sides of the table and cells. For Inverse Dark Table, add
.table-dark
along with .table-bordered
.
Project | Client | Users | Status | Actions |
---|---|---|---|---|
Angular Project | Peter Charls |
|
Active |
|
React Project | Ronald Frest |
|
Completed |
|
Vuejs Project | Jack Obes |
|
Scheduled |
|
Bootstrap Project | Jerry Milton |
|
Pending |
|
Borderless Table
Add .table-borderless
for a table without borders. It can also be used on dark tables.
Project | Client | Users | Status | Actions |
---|---|---|---|---|
Angular Project | Peter Charls |
|
Active |
|
React Project | Ronald Frest |
|
Completed |
|
Vuejs Project | Jack Obes |
|
Scheduled |
|
Bootstrap Project | Jerry Milton |
|
Pending |
|
Hoverable rows
Add .table-hover
to enable a hover state on table rows within a
<tbody>
.
Project | Client | Users | Status | Actions |
---|---|---|---|---|
Angular Project | Peter Charls |
|
Active |
|
React Project | Ronald Frest |
|
Completed |
|
Vuejs Project | Jack Obes |
|
Scheduled |
|
Bootstrap Project | Jerry Milton |
|
Pending |
|
Small Table
Add .table-sm
class with .table
to display small size
table.
Project | Client | Users | Status | Actions |
---|---|---|---|---|
Angular Project | Peter Charls |
|
Active |
|
React Project | Ronald Frest |
|
Completed |
|
Vuejs Project | Jack Obes |
|
Scheduled |
|
Bootstrap Project | Jerry Milton |
|
Pending |
|
Contextual classes
Use contextual classes to color table rows or individual cells. Read full documnetation here.
Project | Client | Users | Status | Actions |
---|---|---|---|---|
Figma Project | Ronnie Shane |
|
Active |
|
React Project | Ronald Frest |
|
Completed |
|
Angular Project | Peter Charls |
|
Active |
|
Vuejs Project | Jack Obes |
|
Scheduled |
|
Bootstrap Project | Jerry Milton |
|
Pending |
|
Figma Project | Janne Ale |
|
Active |
|
React Custom | Ted Richer |
|
Scheduled |
|
Latest Bootstrap | Perry Parker |
|
Pending |
|
Angular UI | Ana Bell |
|
Completed |
|
Bootstrap UI | Jerry Milton |
|
Completed |
|
Table without card
Project | Client | Users | Status | Actions |
---|---|---|---|---|
Angular Project | Peter Charls |
|
Active |
|
React Project | Ronald Frest |
|
Completed |
|
Vuejs Project | Jack Obes |
|
Scheduled |
|
Bootstrap Project | Jerry Milton |
|
Pending |
|
Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all
viewports by adding .table-responsive
class on
.table
. Or, pick a maximum breakpoint with which to have a responsive
table up to by adding .table-responsive{-sm|-md|-lg|-xl}
. Read full
documentation
here.
Vertical clipping/truncation
Responsive tables make use of overflow-y: hidden
, which clips off
any content that goes beyond the bottom or top edges of the table. In particular, this can clip off
dropdown menus and other third-party widgets.
# | Heading 1 | Heading 2 | Heading 3 | Heading 4 | Heading 5 | Heading 6 | Heading 7 | Heading 8 | Heading 9 | Heading 10 | Heading 11 | Heading 12 | Heading 13 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | 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 | Table cell | 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 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
4 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
Table Hover Animation
Add .table-hover-animation
to enable a hover stat with animation on table rows within a
<tbody>
.
Project | Client | Users | Status | Actions |
---|---|---|---|---|
Angular Project | Peter Charls |
|
Active |
|
React Project | Ronald Frest |
|
Completed |
|
Vuejs Project | Jack Obes |
|
Scheduled |
|
Bootstrap Project | Jerry Milton |
|
Pending |
|