Basic Table
Just add the base class .table
to any <table>
.
#
|
First Name
|
Last Name
|
Username
|
Role
|
Country
|
1
|
Alexander
|
Orton
|
@mdorton
|
Admin
|
USA
|
2
|
John Deo
|
Deo
|
@johndeo
|
User
|
USA
|
3
|
Randy Orton
|
the Bird
|
@twitter
|
admin
|
UK
|
4
|
Randy Mark
|
Ottandy
|
@mdothe
|
user
|
AUS
|
5
|
Ram Jacob
|
Thornton
|
@twitter
|
admin
|
IND
|
Hoverable rows
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
#
|
First Name
|
Last Name
|
Username
|
Role
|
Country
|
1
|
Alexander
|
Orton
|
@mdorton
|
Admin
|
USA
|
2
|
John Deo
|
Deo
|
@johndeo
|
User
|
USA
|
3
|
Randy Orton
|
the Bird
|
@twitter
|
admin
|
UK
|
4
|
Randy Mark
|
Ottandy
|
@mdothe
|
user
|
AUS
|
5
|
Ram Jacob
|
Thornton
|
@twitter
|
admin
|
IND
|
Table head options
Similar to tables and dark tables,use the modifier classes .thead-light
or .thead-dark
to make <thead>
s appear light or dark gray.
#
|
First Name
|
Last Name
|
Username
|
1
|
Mark
|
Otto
|
@mdo
|
2
|
Jacob
|
Thornton
|
@fat
|
3
|
Larry
|
the Bird
|
@twitter
|
#
|
First Name
|
Last Name
|
Username
|
1
|
Mark
|
Otto
|
@mdo
|
2
|
Jacob
|
Thornton
|
@fat
|
3
|
Larry
|
the Bird
|
@twitter
|
Striped rows
Use .table-striped
to add zebra-striping to any table row within the <tbody>
.
#
|
First Name
|
Last Name
|
Username
|
1
|
Mark
|
Otto
|
@mdo
|
2
|
Jacob
|
Thornton
|
@fat
|
3
|
Larry
|
the Bird
|
@twitter
|
Bordered table
Add .table-bordered
for borders on all sides of the table and cells.
#
|
First Name
|
Last Name
|
Username
|
1
|
Mark
|
Otto
|
@mdo
|
2
|
Mark
|
Otto
|
@TwBootstrap
|
3
|
Jacob
|
Thornton
|
@fat
|
4
|
Larry the Bird
|
@twitter
|