Loading...
#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-outline-light tn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-ellipsis-h" 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-outline-light btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-ellipsis-h" 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-outline-light btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-ellipsis-h" 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>