China
Tanzania
United Kingdom
Tunisia
Spain
Tables
<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>| # | Avatar | First | Last | Handle |
|---|---|---|---|---|
| 1 |
|
Jessie | Otto | @mdo |
| 2 |
|
Jacob | Thornton | @fat |
| 3 |
|
Larry | the Bird | |
| 2 |
|
Mark | Thornton | @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>| # | Avatar | First | Last | Status |
|---|---|---|---|---|
| 1 |
|
Jessie | Otto | Active |
| 2 |
|
Morn | Thornton | Passive |
| 3 |
|
Larry | the Bird | Pending |
<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
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<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
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<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
| Class | Heading | Heading |
|---|---|---|
| Active | Cell | Cell |
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
| Dark | Cell | Cell |
<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
| # | Heading | Heading |
|---|---|---|
| 1 | Cell | Cell |
| 2 | Cell | Cell |
| 3 | Cell | Cell |
| 4 | Cell | Cell |
| 5 | Cell | Cell |
| 6 | Cell | Cell |
| 7 | Cell | Cell |
| 8 | Cell | Cell |
| 9 | Cell | Cell |
<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
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<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>