#FirstLastHandleAction
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<div class="table-responsive"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> <th class="text-right" scope="col">Action</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td class="text-right"> <div class="dropdown"> <a href="#" class="btn btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-ellipsis-v" aria-hidden="true"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div> </div> </td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> <td class="text-right"> <div class="dropdown"> <a href="#" class="btn btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-ellipsis-v" aria-hidden="true"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div> </div> </td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> <td class="text-right"> <div class="dropdown"> <a href="#" class="btn btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-ellipsis-v" aria-hidden="true"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div> </div> </td> </tr> </tbody> </table></div>
#AvatarFirstLastHandle
1
image
JessieOtto@mdo
2
J
JacobThornton@fat
3
image
Larrythe Bird@twitter
2
M
MarkThornton@fat
<div class="table-responsive"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Avatar</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> <th> <figure class="avatar avatar-sm"> <img src="assets/media/image/user/women_avatar5.jpg" class="rounded-circle" alt="image"> </figure> </th> <td>Jessie</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <th> <figure class="avatar avatar-sm"> <a href="#"> <span class="avatar-title bg-info rounded-circle">J</span> </a> </figure> </th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <th> <figure class="avatar avatar-sm"> <img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle" alt="image"> </figure> </th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> <tr> <th scope="row">2</th> <th> <figure class="avatar avatar-sm"> <a href="#"> <span class="avatar-title bg-warning rounded-circle">M</span> </a> </figure> </th> <td>Mark</td> <td>Thornton</td> <td>@fat</td> </tr> </tbody> </table></div>
#AvatarFirstLastStatus
1
image
JessieOttoActive
2
M
MornThorntonPassive
3
image
Larrythe BirdPending
<div class="table-responsive"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Avatar</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Status</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <th> <figure class="avatar avatar-sm"> <img src="assets/media/image/user/women_avatar5.jpg" class="rounded-circle" alt="image"> </figure> </th> <td>Jessie</td> <td>Otto</td> <td> <span class="badge badge-success">Active</span> </td> </tr> <tr> <th scope="row">2</th> <th> <figure class="avatar avatar-sm"> <a href="#"> <span class="avatar-title bg-primary rounded-circle">M</span> </a> </figure> </th> <td>Morn</td> <td>Thornton</td> <td> <span class="badge badge-danger">Passive</span> </td> </tr> <tr> <th scope="row">3</th> <th> <figure class="avatar avatar-sm"> <img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle" alt="image"> </figure> </th> <td>Larry</td> <td>the Bird</td> <td> <span class="badge badge-warning">Pending</span> </td> </tr> </tbody> </table></div>
Striped Rows
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<div class="table-responsive"> <table class="table 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>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table></div>
Bordered Table
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<div class="table-responsive"> <table class="table table-bordered"> <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>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table></div>
Borderless Table
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<div class="table-responsive"> <table class="table table-borderless"> <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>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table></div>
Hoverable Rows
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<div class="table-responsive"> <table class="table 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>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table></div>
Small Table
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<div class="table-responsive"> <table class="table table-small"> <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>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table></div>
Table Head Options
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<div class="table-responsive"> <table class="table"> <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>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table></div><div class="table-responsive"> <table class="table"> <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>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table></div>
Contextual Classes
ClassHeadingHeading
ActiveCellCell
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
LightCellCell
DarkCellCell
<div class="table-responsive"> <table class="table"> <thead> <tr> <th scope="col">Class</th> <th scope="col">Heading</th> <th scope="col">Heading</th> </tr> </thead> <tbody> <tr class="table-active"> <th scope="row">Active</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Default</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-primary"> <th scope="row">Primary</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-secondary"> <th scope="row">Secondary</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-success"> <th scope="row">Success</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-danger"> <th scope="row">Danger</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-warning"> <th scope="row">Warning</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-info"> <th scope="row">Info</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-light"> <th scope="row">Light</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-dark"> <th scope="row">Dark</th> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table></div>
Contextual Classes
#HeadingHeading
1CellCell
2CellCell
3CellCell
4CellCell
5CellCell
6CellCell
7CellCell
8CellCell
9CellCell
<div class="table-responsive"> <table class="table table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">Heading</th> <th scope="col">Heading</th> </tr> </thead> <tbody> <tr class="bg-primary"> <th scope="row">1</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">2</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="bg-success"> <th scope="row">3</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">4</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="bg-info"> <th scope="row">5</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">6</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="bg-warning"> <th scope="row">7</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">8</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="bg-danger"> <th scope="row">9</th> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table></div>
Captions
List of users
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<div class="table-responsive"> <table class="table"> <caption>List of users</caption> <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>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table></div>