For detail documentation, View Tables on Bootstrap
Example
#
First
Last
Handle
1
Steven
Speilberg
@mdo
2
Martin
Scorsese
@fat
3
James
Cameron
@twitter
< table class = " table mb-0" >
< thead>
< tr>
< th scope = " col" > #</ th>
< th scope = " col" > First</ th>
< th scope = " col" > Last</ th>
< th scope = " col" > Handle</ th>
</ tr>
</ thead>
< tbody>
< tr>
< th scope = " row" > 1</ th>
< td> Steven</ td>
< td> Speilberg</ td>
< td> @mdo</ td>
</ tr>
< tr>
< th scope = " row" > 2</ th>
< td> Martin</ td>
< td> Scorsese</ td>
< td> @fat</ td>
</ tr>
< tr>
< th scope = " row" > 3</ th>
< td> James</ td>
< td> Cameron</ td>
< td> @twitter</ td>
</ tr>
</ tbody>
</ table>
Dark
#
First
Last
Handle
1
Client
Eastwood
@mdo
2
Quentin
Tarantino
@fat
3
Redley
Scott
@twitter
< table class = " table mb-0 table-dark" >
< thead>
< tr>
< th scope = " col" > #</ th>
< th scope = " col" > First</ th>
< th scope = " col" > Last</ th>
< th scope = " col" > Handle</ th>
</ tr>
</ thead>
< tbody>
< tr>
< th scope = " row" > 1</ th>
< td> Client</ td>
< td> Eastwood</ td>
< td> @mdo</ td>
</ tr>
< tr>
< th scope = " row" > 2</ th>
< td> Quentin</ td>
< td> Tarantino</ td>
< td> @fat</ td>
</ tr>
< tr>
< th scope = " row" > 3</ th>
< td> Redley</ td>
< td> Scott</ td>
< td> @twitter</ td>
</ tr>
</ tbody>
</ table>
Header Dark
#
First
Last
Handle
1
Devid
Fincher
@mdo
2
Alfred
Hitchcock
@fat
3
Woodley
Allen
@twitter
< table class = " table mb-0" >
< thead class = " thead-dark" >
< tr>
< th scope = " col" > #</ th>
< th scope = " col" > First</ th>
< th scope = " col" > Last</ th>
< th scope = " col" > Handle</ th>
</ tr>
</ thead>
< tbody>
< tr>
< th scope = " row" > 1</ th>
< td> Devid</ td>
< td> Fincher</ td>
< td> @mdo</ td>
</ tr>
< tr>
< th scope = " row" > 2</ th>
< td> Alfred</ td>
< td> Hitchcock</ td>
< td> @fat</ td>
</ tr>
< tr>
< th scope = " row" > 3</ th>
< td> Woodley</ td>
< td> Allen</ td>
< td> @twitter</ td>
</ tr>
</ tbody>
</ table>
Header Light
#
First
Last
Handle
1
Stanley
Kubrick
@mdo
2
Peter
Jackson
@fat
3
Francis
Ford
@twitter
< table class = " table mb-0" >
< thead class = " thead-light" >
< tr>
< th scope = " col" > #</ th>
< th scope = " col" > First</ th>
< th scope = " col" > Last</ th>
< th scope = " col" > Handle</ th>
</ tr>
</ thead>
< tbody>
< tr>
< th scope = " row" > 1</ th>
< td> Stanley</ td>
< td> Kubrick</ td>
< td> @mdo</ td>
</ tr>
< tr>
< th scope = " row" > 2</ th>
< td> Peter</ td>
< td> Jackson</ td>
< td> @fat</ td>
</ tr>
< tr>
< th scope = " row" > 3</ th>
< td> Francis</ td>
< td> Ford</ td>
< td> @twitter</ td>
</ tr>
</ tbody>
</ table>
Table Striped
#
First
Last
Handle
1
Bob
Gale
@mdo
2
Wes
Anderson
@fat
3
Billy
Wilder
@twitter
< table class = " table mb-0 table-striped" >
< thead>
< tr>
< th scope = " col" > #</ th>
< th scope = " col" > First</ th>
< th scope = " col" > Last</ th>
< th scope = " col" > Handle</ th>
</ tr>
</ thead>
< tbody>
< tr>
< th scope = " row" > 1</ th>
< td> Bob</ td>
< td> Gale</ td>
< td> @mdo</ td>
</ tr>
< tr>
< th scope = " row" > 2</ th>
< td> Wes</ td>
< td> Anderson</ td>
< td> @fat</ td>
</ tr>
< tr>
< th scope = " row" > 3</ th>
< td> Billy</ td>
< td> Wilder</ td>
< td> @twitter</ td>
</ tr>
</ tbody>
</ table>
Table Hover
#
First
Last
Handle
1
Steven
Soderbergh
@mdo
2
Orson
Welles
@fat
3
Larry the Bird
@twitter
< table class = " table mb-0 table-hover" >
< thead>
< tr>
< th scope = " col" > #</ th>
< th scope = " col" > First</ th>
< th scope = " col" > Last</ th>
< th scope = " col" > Handle</ th>
</ tr>
</ thead>
< tbody>
< tr>
< th scope = " row" > 1</ th>
< td> Steven</ td>
< td> Soderbergh</ td>
< td> @mdo</ td>
</ tr>
< tr>
< th scope = " row" > 2</ th>
< td> Orson</ td>
< td> Welles</ td>
< td> @fat</ td>
</ tr>
< tr>
< th scope = " row" > 3</ th>
< td colspan = " 2" > Larry the Bird</ td>
< td> @twitter</ td>
</ tr>
</ tbody>
</ table>