-
English
-
Clear All Notification
View AllCaleb Flakelar commented on Admin 1 min ago
New user registered. 5 hours ago
Cristina Pride
Hi, How are you? What about our next meeting
Caleb Flakelar commented on Admin 4 days ago
Karen Robinson
Wow ! this admin looks good and awesome design
Carlos Crouch liked Admin 13 days ago
-
Dominic Keller
Founder
Basic Tables
Basic example
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
| Name | Phone Number | Date of Birth | Active? |
|---|---|---|---|
| Risa D. Pearson | 336-508-2157 | July 24, 1950 |
|
| Ann C. Thompson | 646-473-2057 | January 25, 1959 |
|
| Paul J. Friend | 281-308-0793 | September 1, 1939 |
|
| Linda G. Smith | 606-253-1207 | May 3, 1962 |
|
<table class="table table-centered mb-0">
<thead>
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Date of Birth</th>
<th>Active?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Risa D. Pearson</td>
<td>336-508-2157</td>
<td>July 24, 1950</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch1" checked data-switch="success"/>
<label for="switch1" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
<tr>
<td>Ann C. Thompson</td>
<td>646-473-2057</td>
<td>January 25, 1959</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch2" checked data-switch="success"/>
<label for="switch2" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
<tr>
<td>Paul J. Friend</td>
<td>281-308-0793</td>
<td>September 1, 1939</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch3" data-switch="success"/>
<label for="switch3" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
<tr>
<td>Linda G. Smith</td>
<td>606-253-1207</td>
<td>May 3, 1962</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch4" data-switch="success"/>
<label for="switch4" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
</tbody>
</table>
Inverse table
You can also invert the colors—with light text on dark backgrounds—with .table-dark.
| Name | Phone Number | Date of Birth | Active? |
|---|---|---|---|
| Risa D. Pearson | 336-508-2157 | July 24, 1950 |
|
| Ann C. Thompson | 646-473-2057 | January 25, 1959 |
|
| Paul J. Friend | 281-308-0793 | September 1, 1939 |
|
| Sean C. Nguyen | 269-714-6825 | February 5, 1994 |
|
<table class="table table-dark mb-0">
<thead>
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Date of Birth</th>
<th>Active?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Risa D. Pearson</td>
<td>336-508-2157</td>
<td>July 24, 1950</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch6" data-switch="success"/>
<label for="switch6" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
<tr>
<td>Ann C. Thompson</td>
<td>646-473-2057</td>
<td>January 25, 1959</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch7" checked data-switch="success"/>
<label for="switch7" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
<tr>
<td>Paul J. Friend</td>
<td>281-308-0793</td>
<td>September 1, 1939</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch8" data-switch="success"/>
<label for="switch8" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
<tr>
<td>Sean C. Nguyen</td>
<td>269-714-6825</td>
<td>February 5, 1994</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch10" checked data-switch="success"/>
<label for="switch10" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
</tbody>
</table>
Striped rows
Use .table-striped to add zebra-striping to any table row
within the <tbody>.
Ann C. Thompson
<table class="table table-striped table-centered mb-0">
<thead>
<tr>
<th>User</th>
<th>Account No.</th>
<th>Balance</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-user">
<img src="assets/images/users/avatar-2.jpg" alt="table-user" class="mr-2 rounded-circle" />
Risa D. Pearson
</td>
<td>AC336 508 2157</td>
<td>July 24, 1950</td>
<td class="table-action">
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
</td>
</tr>
<tr>
<td class="table-user">
<img src="assets/images/users/avatar-3.jpg" alt="table-user" class="mr-2 rounded-circle" />
Ann C. Thompson
</td>
<td>SB646 473 2057</td>
<td>January 25, 1959</td>
<td class="table-action">
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
</td>
</tr>
<tr>
<td class="table-user">
<img src="assets/images/users/avatar-4.jpg" alt="table-user" class="mr-2 rounded-circle" />
Paul J. Friend
</td>
<td>DL281 308 0793</td>
<td>September 1, 1939</td>
<td class="table-action">
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
</td>
</tr>
<tr>
<td class="table-user">
<img src="assets/images/users/avatar-5.jpg" alt="table-user" class="mr-2 rounded-circle" />
Sean C. Nguyen
</td>
<td>CA269 714 6825</td>
<td>February 5, 1994</td>
<td class="table-action">
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
</td>
</tr>
</tbody>
</table>
Bordered table
Add .table-bordered for borders on all sides of the table and cells.
Risa D. Pearson
Ann C. Thompson
Paul J. Friend
Sean C. Nguyen
<table class="table table-bordered table-centered mb-0">
<thead>
<tr>
<th>User</th>
<th>Account No.</th>
<th>Balance</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-user">
<img src="assets/images/users/avatar-6.jpg" alt="table-user" class="mr-2 rounded-circle" />
Risa D. Pearson
</td>
<td>AC336 508 2157</td>
<td>July 24, 1950</td>
<td class="table-action text-center">
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
</td>
</tr>
<tr>
<td class="table-user">
<img src="assets/images/users/avatar-7.jpg" alt="table-user" class="mr-2 rounded-circle" />
Ann C. Thompson
</td>
<td>SB646 473 2057</td>
<td>January 25, 1959</td>
<td class="table-action text-center">
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
</td>
</tr>
<tr>
<td class="table-user">
<img src="assets/images/users/avatar-8.jpg" alt="table-user" class="mr-2 rounded-circle" />
Paul J. Friend
</td>
<td>DL281 308 0793</td>
<td>September 1, 1939</td>
<td class="table-action text-center">
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
</td>
</tr>
<tr>
<td class="table-user">
<img src="assets/images/users/avatar-9.jpg" alt="table-user" class="mr-2 rounded-circle" />
Sean C. Nguyen
</td>
<td>CA269 714 6825</td>
<td>February 5, 1994</td>
<td class="table-action text-center">
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
</td>
</tr>
</tbody>
</table>
Hoverable rows
Add .table-hover to enable a hover state on table rows within a <tbody>.
| Product | Price | Quantity | Amount |
|---|---|---|---|
| ASOS Ridley High Waist | $79.49 | 82 Pcs | $6,518.18 |
| Marco Lightweight Shirt | $128.50 | 37 Pcs | $4,754.50 |
| Half Sleeve Shirt | $39.99 | 64 Pcs | $2,559.36 |
| Lightweight Jacket | $20.00 | 184 Pcs | $3,680.00 |
<table class="table table-hover table-centered mb-0">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>ASOS Ridley High Waist</td>
<td>$79.49</td>
<td><span class="badge badge-primary">82 Pcs</span></td>
<td>$6,518.18</td>
</tr>
<tr>
<td>Marco Lightweight Shirt</td>
<td>$128.50</td>
<td><span class="badge badge-primary">37 Pcs</span></td>
<td>$4,754.50</td>
</tr>
<tr>
<td>Half Sleeve Shirt</td>
<td>$39.99</td>
<td><span class="badge badge-primary">64 Pcs</span></td>
<td>$2,559.36</td>
</tr>
<tr>
<td>Lightweight Jacket</td>
<td>$20.00</td>
<td><span class="badge badge-primary">184 Pcs</span></td>
<td>$3,680.00</td>
</tr>
</tbody>
</table>
Small table
Add .table-sm to make tables more compact by cutting cell padding in half.
| Product | Price | Quantity | Amount |
|---|---|---|---|
| ASOS Ridley High Waist | $79.49 | 82 Pcs | $6,518.18 |
| Marco Lightweight Shirt | $128.50 | 37 Pcs | $4,754.50 |
| Half Sleeve Shirt | $39.99 | 64 Pcs | $2,559.36 |
| Lightweight Jacket | $20.00 | 184 Pcs | $3,680.00 |
| Marco Shoes | $28.49 | 69 Pcs | $1,965.81 |
| ASOS Ridley High Waist | $79.49 | 82 Pcs | $6,518.18 |
<table class="table table-sm table-centered mb-0">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>ASOS Ridley High Waist</td>
<td>$79.49</td>
<td><span class="badge badge-primary">82 Pcs</span></td>
<td>$6,518.18</td>
</tr>
<tr>
<td>Marco Lightweight Shirt</td>
<td>$128.50</td>
<td><span class="badge badge-primary">37 Pcs</span></td>
<td>$4,754.50</td>
</tr>
<tr>
<td>Half Sleeve Shirt</td>
<td>$39.99</td>
<td><span class="badge badge-primary">64 Pcs</span></td>
<td>$2,559.36</td>
</tr>
<tr>
<td>Lightweight Jacket</td>
<td>$20.00</td>
<td><span class="badge badge-primary">184 Pcs</span></td>
<td>$3,680.00</td>
</tr>
<tr>
<td>Marco Shoes</td>
<td>$28.49</td>
<td><span class="badge badge-primary">69 Pcs</span></td>
<td>$1,965.81</td>
</tr>
<tr>
<td>ASOS Ridley High Waist</td>
<td>$79.49</td>
<td><span class="badge badge-primary">82 Pcs</span></td>
<td>$6,518.18</td>
</tr>
</tbody>
</table>
Table head options
Use one of two modifier classes to make <thead>s appear light or dark gray.
| Product | Courier | Process | Status |
|---|---|---|---|
| ASOS Ridley High Waist | FedEx |
|
Delivered |
| Marco Lightweight Shirt | DHL |
|
Shipped |
| Half Sleeve Shirt | Bright |
|
Order Received |
| Lightweight Jacket | FedEx |
|
Delivered |
<table class="table table-centered mb-0">
<thead class="thead-dark">
<tr>
<th>Product</th>
<th>Courier</th>
<th>Process</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>ASOS Ridley High Waist</td>
<td>FedEx</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-lg bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><i class="mdi mdi-circle text-success"></i> Delivered</td>
</tr>
<tr>
<td>Marco Lightweight Shirt</td>
<td>DHL</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-lg bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><i class="mdi mdi-circle text-warning"></i> Shipped</td>
</tr>
<tr>
<td>Half Sleeve Shirt</td>
<td>Bright</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-lg bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><i class="mdi mdi-circle text-info"></i> Order Received</td>
</tr>
<tr>
<td>Lightweight Jacket</td>
<td>FedEx</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-lg bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><i class="mdi mdi-circle text-success"></i> Delivered</td>
</tr>
</tbody>
</table>
Contextual with background color
Use contextual classes to color table rows or individual cells.
| Product | Courier | Process | Status |
|---|---|---|---|
| ASOS Ridley High Waist | FedEx |
|
Delivered |
| Marco Lightweight Shirt | DHL |
|
Shipped |
| Half Sleeve Shirt | Bright |
|
Order Received |
| Lightweight Jacket | FedEx |
|
Delivered |
<table class="table table-centered mb-0">
<thead>
<tr>
<th>Product</th>
<th>Courier</th>
<th>Process</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="table-success">
<td>ASOS Ridley High Waist</td>
<td>FedEx</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-lg bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><i class="mdi mdi-circle text-success"></i> Delivered</td>
</tr>
<tr>
<td>Marco Lightweight Shirt</td>
<td>DHL</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-lg bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><i class="mdi mdi-circle text-warning"></i> Shipped</td>
</tr>
<tr class="bg-danger text-white">
<td>Half Sleeve Shirt</td>
<td>Bright</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-lg bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><i class="mdi mdi-circle text-info"></i> Order Received</td>
</tr>
<tr>
<td>Lightweight Jacket</td>
<td>FedEx</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-lg bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><i class="mdi mdi-circle text-success"></i> Delivered</td>
</tr>
</tbody>
</table>
Always responsive
Across every breakpoint, use
.table-responsive for horizontally scrolling tables. Use
.table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave
normally and not scroll horizontally.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
Basic Borderless Example
Add .table-borderless for a table without borders.
| Name | Phone Number | Date of Birth | Active? |
|---|---|---|---|
| Risa D. Pearson | 336-508-2157 | July 24, 1950 |
|
| Ann C. Thompson | 646-473-2057 | January 25, 1959 |
|
| Paul J. Friend | 281-308-0793 | September 1, 1939 |
|
| Linda G. Smith | 606-253-1207 | May 3, 1962 |
|
<table class="table table-centered table-borderless mb-0">
<thead>
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Date of Birth</th>
<th>Active?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Risa D. Pearson</td>
<td>336-508-2157</td>
<td>July 24, 1950</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch21" checked data-switch="success"/>
<label for="switch21" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
<tr>
<td>Ann C. Thompson</td>
<td>646-473-2057</td>
<td>January 25, 1959</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch22" checked data-switch="success"/>
<label for="switch22" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
<tr>
<td>Paul J. Friend</td>
<td>281-308-0793</td>
<td>September 1, 1939</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch23" data-switch="success"/>
<label for="switch23" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
<tr>
<td>Linda G. Smith</td>
<td>606-253-1207</td>
<td>May 3, 1962</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch24" data-switch="success"/>
<label for="switch24" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
</tbody>
</table>
Inverse Borderless table
Add .table-borderless for a table without borders.
| Name | Phone Number | Date of Birth | Active? |
|---|---|---|---|
| Risa D. Pearson | 336-508-2157 | July 24, 1950 |
|
| Ann C. Thompson | 646-473-2057 | January 25, 1959 |
|
| Paul J. Friend | 281-308-0793 | September 1, 1939 |
|
| Sean C. Nguyen | 269-714-6825 | February 5, 1994 |
|
<table class="table table-dark table-borderless mb-0">
<thead>
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Date of Birth</th>
<th>Active?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Risa D. Pearson</td>
<td>336-508-2157</td>
<td>July 24, 1950</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch25" data-switch="success"/>
<label for="switch25" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
<tr>
<td>Ann C. Thompson</td>
<td>646-473-2057</td>
<td>January 25, 1959</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch26" checked data-switch="success"/>
<label for="switch26" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
<tr>
<td>Paul J. Friend</td>
<td>281-308-0793</td>
<td>September 1, 1939</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch27" data-switch="success"/>
<label for="switch27" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
<tr>
<td>Sean C. Nguyen</td>
<td>269-714-6825</td>
<td>February 5, 1994</td>
<td>
<!-- Switch-->
<div>
<input type="checkbox" id="switch28" checked data-switch="success"/>
<label for="switch28" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
</div>
</td>
</tr>
</tbody>
</table>