Basic Tables
Default Table
Use table
class to show bootstrap-based default table.
<table class="table table-nowrap">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Customer</th>
<th scope="col">Date</th>
<th scope="col">Invoice</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><a href="#" class="fw-semibold">#VZ2110</a></th>
<td>Bobby Davis</td>
<td>October 15, 2021</td>
<td>$2,300</td>
<td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
</tr>
<tr>
<th scope="row"><a href="#" class="fw-semibold">#VZ2109</a></th>
<td>Christopher Neal</td>
<td>October 7, 2021</td>
<td>$5,500</td>
<td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
</tr>
<tr>
<th scope="row"><a href="#" class="fw-semibold">#VZ2108</a></th>
<td>Monkey Karry</td>
<td>October 5, 2021</td>
<td>$2,420</td>
<td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
</tr>
<tr>
<th scope="row"><a href="#" class="fw-semibold">#VZ2107</a></th>
<td>James White</td>
<td>October 2, 2021</td>
<td>$7,452</td>
<td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
</tr>
</tbody>
</table>
Striped Rows
Use table-striped
class to add zebra-striping to any table row within the <tbody>.
ID | Customer | Date | Invoice | Action |
---|---|---|---|---|
01 | Bobby Davis | Nov 14, 2021 | $2,410 | Confirmed |
02 | Christopher Neal | Nov 21, 2021 | $1,450 | Waiting |
03 | Monkey Karry | Nov 24, 2021 | $3,500 | Confirmed |
04 | Aaron James | Nov 25, 2021 | $6,875 | Cancelled |
<!-- Striped Rows -->
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Customer</th>
<th scope="col">Date</th>
<th scope="col">Invoice</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bobby Davis</td>
<td>Nov 14, 2021</td>
<td>$2,410</td>
<td><span class="badge bg-success">Confirmed</span></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Christopher Neal</td>
<td>Nov 21, 2021</td>
<td>$1,450</td>
<td><span class="badge bg-warning">Waiting</span></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Monkey Karry</td>
<td>Nov 24, 2021</td>
<td>$3,500</td>
<td><span class="badge bg-success">Confirmed</span></td>
</tr>
<tr>
<th scope="row">4</th>
<td>Aaron James</td>
<td>Nov 25, 2021</td>
<td>$6,875</td>
<td><span class="badge bg-danger">Cancelled</span></td>
</tr>
</tbody>
</table>
Striped columns
Use .table-striped-columns
to add zebra-striping to any table column.
<div class="table-responsive table-card">
<table class="table table-nowrap table-striped-columns mb-0">
<thead class="table-light">
<tr>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck">
<label class="form-check-label" for="cardtableCheck"></label>
</div>
</th>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Total</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck01">
<label class="form-check-label" for="cardtableCheck01"></label>
</div>
</td>
<td><a href="#" class="fw-semibold">#VL2110</a></td>
<td>William Elmore</td>
<td>07 Oct, 2021</td>
<td>$24.05</td>
<td><span class="badge bg-success">Paid</span></td>
<td>
<button type="button" class="btn btn-sm btn-light">Details</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck02">
<label class="form-check-label" for="cardtableCheck02"></label>
</div>
</td>
<td><a href="#" class="fw-semibold">#VL2109</a></td>
<td>Georgie Winters</td>
<td>07 Oct, 2021</td>
<td>$26.15</td>
<td><span class="badge bg-success">Paid</span></td>
<td>
<button type="button" class="btn btn-sm btn-light">Details</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck03">
<label class="form-check-label" for="cardtableCheck03"></label>
</div>
</td>
<td><a href="#" class="fw-semibold">#VL2108</a></td>
<td>Whitney Meier</td>
<td>06 Oct, 2021</td>
<td>$21.25</td>
<td><span class="badge bg-danger">Refund</span></td>
<td>
<button type="button" class="btn btn-sm btn-light">Details</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck04">
<label class="form-check-label" for="cardtableCheck04"></label>
</div>
</td>
<td><a href="#" class="fw-semibold">#VL2107</a></td>
<td>Justin Maier</td>
<td>05 Oct, 2021</td>
<td>$25.03</td>
<td><span class="badge bg-success">Paid</span></td>
<td>
<button type="button" class="btn btn-sm btn-light">Details</button>
</td>
</tr>
</tbody>
</table>
</div>
Tables Colors
Use table-dark
class to set dark color table body and table-success
class to set success color table body respectively.
use table-
class with different color variation to set required table body color.
ID | Customer | Date | Invoice |
---|---|---|---|
01 | Bobby Davis | Nov 14, 2021 | $2,410 |
02 | Christopher Neal | Nov 21, 2021 | $1,450 |
03 | Monkey Karry | Nov 24, 2021 | $3,500 |
04 | Aaron James | Nov 25, 2021 | $6,875 |
<!-- Table Dark --> <table class="table table-dark table-striped table-nowrap"> <thead> <tr> <th scope="col">Id</th> <th scope="col">Customer</th> <th scope="col">Date</th> <th scope="col">Invoice</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Bobby Davis</td> <td>Nov 14, 2021</td> <td>$2,410</td> </tr> <tr> <th scope="row">2</th> <td>Christopher Neal</td> <td>Nov 21, 2021</td> <td>$1,450</td> </tr> <tr> <th scope="row">3</th> <td>Monkey Karry</td> <td>Nov 24, 2021</td> <td>$3,500</td> </tr> <tr> <th scope="row">4</th> <td>Aaron James</td> <td>Nov 25, 2021</td> <td>$6,875</td> </tr> </tbody> </table>
<table class="table table-success table-striped align-middle table-nowrap mb-0"> <thead> <tr> <th scope="col">Id</th> <th scope="col">Invoice</th> <th scope="col">Amount</th> <th scope="col">Date</th> <th scope="col">Status</th> <th scope="col">Action</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Basic Plan</td> <td>$860</td> <td>Nov 22, 2021</td> <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td> <td> <div class="hstack gap-3 flex-wrap"> <a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a> <a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a> </div> </td> </tr> <tr> <th scope="row">2</th> <td>Premium Plan</td> <td>$1200</td> <td>Nov 10, 2021</td> <td><i class="ri-close-circle-line align-middle text-danger"></i> Unsubscribed</td> <td> <div class="hstack gap-3 flex-wrap"> <a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a> <a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a> </div> </td> </tr> <tr> <th scope="row">3</th> <td>Basic Plan</td> <td>$860</td> <td>Nov 19, 2021</td> <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td> <td> <div class="hstack gap-3 flex-wrap"> <a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a> <a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a> </div> </td> </tr> <tr> <th scope="row">4</th> <td>Corporate Plan</td> <td>$1599</td> <td>Nov 22, 2021</td> <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td> <td> <div class="hstack gap-3 flex-wrap"> <a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a> <a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a> </div> </td> </tr> </tbody> </table>
Hoverable Rows
Use table-hover
class to enable a hover state on table rows within a <tbody>.
ID | Invoice | Amount | Date | Status | Action |
---|---|---|---|---|---|
01 | Basic Plan | $860 | Nov 22, 2021 | Subscribed |
|
02 | Premium Plan | $1200 | Nov 10, 2021 | Unsubscribed |
|
03 | Basic Plan | $860 | Nov 19, 2021 | Subscribed |
|
04 | Corporate Plan | $1599 | Nov 22, 2021 | Subscribed |
|
<!-- Hoverable Rows --> <table class="table table-hover table-nowrap mb-0"> <thead> <tr> <th scope="col"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="checkAll" value="option1"> </div> </th> <th scope="col">Order ID</th> <th scope="col">Shop</th> <th scope="col">Customer</th> <th scope="col">Price</th> <th scope="col">Action</th> </tr> </thead> <tbody> <tr> <th scope="row"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option1" checked> </div> </th> <td>#541254265</td> <td>Amezon</td> <td>Cleo Carson</td> <td>$4,521</td> <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td> </tr> <tr> <th scope="row"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option1" checked> </div> </th> <td>#744145235</td> <td>Shoppers</td> <td>Juston Eichmann</td> <td>$7,546</td> <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td> </tr> <tr> <th scope="row"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option1"> </div> </th> <td>#9855126598</td> <td>Flipkart</td> <td>Bettie Johson</td> <td>$1,350</td> <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td> </tr> <tr> <th scope="row"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="option1"> </div> </th> <td>#847512653</td> <td>Shoppers</td> <td>Maritza Blanda</td> <td>$4,521</td> <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td> </tr> </tbody> </table>
<table class="table table-hover table-striped align-middle table-nowrap mb-0"> <thead> <tr> <th scope="col">Id</th> <th scope="col">Invoice</th> <th scope="col">Amount</th> <th scope="col">Date</th> <th scope="col">Status</th> <th scope="col">Action</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Basic Plan</td> <td>$860</td> <td>Nov 22, 2021</td> <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td> <td> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck1" checked=""> <label class="form-check-label" for="SwitchCheck1">Yes/No</label> </div> </td> </tr> <tr> <th scope="row">2</th> <td>Premium Plan</td> <td>$1200</td> <td>Nov 10, 2021</td> <td><i class="ri-close-circle-line align-middle text-danger"></i> Unsubscribed</td> <td> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck2"> <label class="form-check-label" for="SwitchCheck2">Yes/No</label> </div> </td> </tr> <tr> <th scope="row">3</th> <td>Basic Plan</td> <td>$860</td> <td>Nov 19, 2021</td> <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td> <td> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck3"> <label class="form-check-label" for="SwitchCheck3">Yes/No</label> </div> </td> </tr> <tr> <th scope="row">4</th> <td>Corporate Plan</td> <td>$1599</td> <td>Nov 22, 2021</td> <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td> <td> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck4" checked=""> <label class="form-check-label" for="SwitchCheck4">Yes/No</label> </div> </td> </tr> </tbody> </table>
Card Tables
Use table-card
class to show card-based table within a <tbody>.
<div class="table-responsive table-card">
<table class="table table-nowrap mb-0">
<thead class="table-light">
<tr>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck">
<label class="form-check-label" for="cardtableCheck"></label>
</div>
</th>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Total</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck01">
<label class="form-check-label" for="cardtableCheck01"></label>
</div>
</td>
<td><a href="#" class="fw-semibold">#VL2110</a></td>
<td>William Elmore</td>
<td>07 Oct, 2021</td>
<td>$24.05</td>
<td><span class="badge bg-success">Paid</span></td>
<td>
<button type="button" class="btn btn-sm btn-light">Details</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck02">
<label class="form-check-label" for="cardtableCheck02"></label>
</div>
</td>
<td><a href="#" class="fw-semibold">#VL2109</a></td>
<td>Georgie Winters</td>
<td>07 Oct, 2021</td>
<td>$26.15</td>
<td><span class="badge bg-success">Paid</span></td>
<td>
<button type="button" class="btn btn-sm btn-light">Details</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck03">
<label class="form-check-label" for="cardtableCheck03"></label>
</div>
</td>
<td><a href="#" class="fw-semibold">#VL2108</a></td>
<td>Whitney Meier</td>
<td>06 Oct, 2021</td>
<td>$21.25</td>
<td><span class="badge bg-danger">Refund</span></td>
<td>
<button type="button" class="btn btn-sm btn-light">Details</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck04">
<label class="form-check-label" for="cardtableCheck04"></label>
</div>
</td>
<td><a href="#" class="fw-semibold">#VL2107</a></td>
<td>Justin Maier</td>
<td>05 Oct, 2021</td>
<td>$25.03</td>
<td><span class="badge bg-success">Paid</span></td>
<td>
<button type="button" class="btn btn-sm btn-light">Details</button>
</td>
</tr>
</tbody>
</table>
</div>
Active Tables
Use table-active
class to highlight a table row or cell.
<!-- Active Tables -->
<table class="table table-nowrap mb-0">
<thead>
<tr>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="activetableCheck">
<label class="form-check-label" for="activetableCheck"></label>
</div>
</th>
<th scope="col">Order ID</th>
<th scope="col">Shop</th>
<th scope="col">Customer</th>
<th scope="col">Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="activetableCheck01" checked>
<label class="form-check-label" for="activetableCheck01"></label>
</div>
</th>
<td>#541254265</td>
<td>Amezon</td>
<td>Cleo Carson</td>
<td>$4,521</td>
<td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
</tr>
<tr class="table-active">
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="activetableCheck02" checked>
<label class="form-check-label" for="activetableCheck02"></label>
</div>
</th>
<td>#744145235</td>
<td>Shoppers</td>
<td>Juston Eichmann</td>
<td>$7,546</td>
<td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
</tr>
<tr>
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="activetableCheck03">
<label class="form-check-label" for="activetableCheck03"></label>
</div>
</th>
<td>#9855126598</td>
<td>Flipkart</td>
<td>Bettie Johson</td>
<td>$1,350</td>
<td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
</tr>
<tr>
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="activetableCheck04">
<label class="form-check-label" for="activetableCheck04"></label>
</div>
</th>
<td>#847512653</td>
<td>Shoppers</td>
<td class="table-active">Maritza Blanda</td>
<td>$4,521</td>
<td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
</tr>
</tbody>
</table>
Bordered Tables
Use table-bordered
class to show borders on all sides of the table and cells.
<!-- Bordered Tables -->
<table class="table table-bordered table-nowrap">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Assignee</th>
<th scope="col">Price</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Implement new UX</td>
<td><span class="badge bg-primary-subtle text-primary">Backlog</span></td>
<td>Lanora Sandoval</td>
<td>$4,521</td>
<td>
<div class="dropdown">
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">View</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Design syntax</td>
<td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
<td>Calvin Garrett</td>
<td>$7,546</td>
<td>
<div class="dropdown">
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">View</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Configurable resources</td>
<td><span class="badge bg-success-subtle text-success">Done</span></td>
<td>Florence Guzman</td>
<td>$1,350</td>
<td>
<div class="dropdown">
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">View</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Implement extensions</td>
<td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
<td>Maritza Blanda</td>
<td>$4,521</td>
<td>
<div class="dropdown">
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">View</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
Tables Border Colors
Use border-
class with color variation class to set table border color.
<!-- Tables Border Colors -->
<table class="table table-bordered border-secondary table-nowrap">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Assignee</th>
<th scope="col">Price</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Implement new UX</td>
<td><span class="badge bg-primary-subtle text-primary">Backlog</span></td>
<td>Lanora Sandoval</td>
<td>$4,521</td>
<td>
<div class="dropdown">
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">View</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Design syntax</td>
<td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
<td>Calvin Garrett</td>
<td>$7,546</td>
<td>
<div class="dropdown">
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">View</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Configurable resources</td>
<td><span class="badge bg-success-subtle text-success">Done</span></td>
<td>Florence Guzman</td>
<td>$1,350</td>
<td>
<div class="dropdown">
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">View</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Implement extensions</td>
<td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
<td>Maritza Blanda</td>
<td>$4,521</td>
<td>
<div class="dropdown">
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">View</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
Tables Without Borders
Use table-borderless
to set a table without borders.
<!-- Tables Without Borders -->
<table class="table table-borderless table-nowrap">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Job Title</th>
<th scope="col">Date</th>
<th scope="col">Status</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Annette Black</td>
<td>Industrial Designer</td>
<td>10, Nov 2021</td>
<td><span class="badge bg-success-subtle text-success">Active</span></td>
<td>
<div class="hstack gap-3 fs-15">
<a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
<a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bessie Cooper</td>
<td>Graphic Designer</td>
<td>13, Nov 2021</td>
<td><span class="badge bg-success-subtle text-success">Active</span></td>
<td>
<div class="hstack gap-3 fs-15">
<a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
<a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Leslie Alexander</td>
<td>Product Manager</td>
<td>17, Nov 2021</td>
<td><span class="badge bg-success-subtle text-success">Active</span></td>
<td>
<div class="hstack gap-3 fs-15">
<a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
<a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
</div>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Lenora Sandoval</td>
<td>Applications Engineer</td>
<td>25, Nov 2021</td>
<td><span class="badge bg-danger-subtle text-danger">Disabled</span></td>
<td>
<div class="hstack gap-3 fs-15">
<a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
<a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
Small Tables
Use table-sm
class to create any table more compact by cutting all cell padding in half.
ID | Title | Status | Assignee |
---|---|---|---|
01 | Implement new UX | Backlog | Lanora Sandoval |
02 | Design syntax | In Progress | Calvin Garrett |
03 | Configurable resources | Done | Florence Guzman |
04 | Implement extensions | Backlog | Maritza Blanda |
05 | Applications Engineer | Done | Leslie Alexander |
<!-- Small Tables -->
<table class="table table-sm table-nowrap">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Assignee</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Implement new UX</td>
<td><span class="badge bg-primary-subtle text-primary">Backlog</span></td>
<td>Lanora Sandoval</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Design syntax</td>
<td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
<td>Calvin Garrett</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Configurable resources</td>
<td><span class="badge bg-success-subtle text-success">Done</span></td>
<td>Florence Guzman</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Implement extensions</td>
<td><span class="badge bg-dark-subtle text-body">Backlog</span></td>
<td>Maritza Blanda</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Applications Engineer</td><td>
<span class="badge bg-success-subtle text-success">Done</span></td>
<td>Leslie Alexander</td>
</tr>
</tbody>
</table>
Table Head
Use table-light
or table-dark
class to create <thead> appear light or dark.
<!-- Table Head -->
<table class="table align-middle table-nowrap mb-0">
<thead class="table-light">
<tr>
<th scope="col">Student</th>
<th scope="col">Course</th>
<th scope="col">Author</th>
<th scope="col">Payment</th>
<th scope="col">Process</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milana Scot</td>
<td>UI/UX design</td>
<td>Mitchell Flores</td>
<td>$450</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><a href="javascript:void(0);" class="link-success">Confirmed</a></td>
</tr>
<tr>
<td>Jassica Welsh</td>
<td>3d Animation</td>
<td>Dan Evgeni</td>
<td>$860</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar bg-warning" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><a href="javascript:void(0);" class="link-warning">Waiting</a></td>
</tr>
<tr>
<td>Leslie Alexander</td>
<td>Logotype Design</td>
<td>Olimpia Jordan</td>
<td>$450</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar bg-warning" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><a href="javascript:void(0);" class="link-warning">Waiting</a></td>
</tr>
</tbody>
</table>
Table Foot
Add <tbody>
attribute to group footer content in an HTML table.
ID | Name | Job Title | Date | Payment |
---|---|---|---|---|
01 | Annette Black | Industrial Designer | 10, Nov 2021 | $450 |
02 | Bessie Cooper | Graphic Designer | 13, Nov 2021 | $875 |
03 | Leslie Alexander | Product Manager | 17, Nov 2021 | $410 |
Total | $940 |
<!-- Table Foot -->
<table class="table table-nowrap">
<thead class="table-light ">
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Job Title</th>
<th scope="col">Date</th>
<th scope="col">Payment</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Annette Black</td>
<td>Industrial Designer</td>
<td>10, Nov 2021</td>
<td>$450</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bessie Cooper</td>
<td>Graphic Designer</td>
<td>13, Nov 2021</td>
<td>$875</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Leslie Alexander</td>
<td>Product Manager</td>
<td>17, Nov 2021</td>
<td>$410</td>
</tr>
</tbody>
<tfoot class="table-light">
<tr>
<td colspan="4">Total</td>
<td>$940</td>
</tr>
</tfoot>
</table>
Captions
You can also put the <caption>
attribute on the top of the table with caption-top
class.
ID | Student | Course | Author |
---|---|---|---|
01 | Milana Scot | UI/UX design | Mitchell Flores |
02 | Jassica Welsh | 3d Animation | Dan Evgeni |
03 | Leslie Alexander | Logotype Design | Olimpia Jordan |
<!-- Captions -->
<table class="table caption-top table-nowrap">
<thead class="table-light">
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Job Title</th>
<th scope="col">Date</th>
<th scope="col">Payment</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Annette Black</td>
<td>Industrial Designer</td>
<td>10, Nov 2021</td>
<td>$450</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bessie Cooper</td>
<td>Graphic Designer</td>
<td>13, Nov 2021</td>
<td>$875</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Leslie Alexander</td>
<td>Product Manager</td>
<td>17, Nov 2021</td>
<td>$410</td>
</tr>
</tbody>
<tfoot class="table-light">
<tr>
<td colspan="4">Total</td>
<td>$940</td>
</tr>
</tfoot>
</table>
Table Nesting
Example of basic table nesting. Border styles, active styles, and table variants are not inherited by nested tables.
ID | Name | Job Title | Date | Payment | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
01 | Annette Black | Industrial Designer | 10, Nov 2021 | $450 | ||||||||||||
|
||||||||||||||||
02 | Bessie Cooper | Graphic Designer | 13, Nov 2021 | $875 | ||||||||||||
03 | Leslie Alexander | Product Manager | 16, Nov 2021 | $410 | ||||||||||||
04 | Bettie Johson | Applications Engineer | 24, Nov 2021 | $620 | ||||||||||||
05 | Monkey Karry | Implement new UX | 25, Nov 2021 | $795 |
<!-- Table Nesting -->
<table class="table table-nowrap">
<thead class="table-light">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Job Title</th>
<th scope="col">Date</th>
<th scope="col">Payment</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Annette Black</td>
<td>Industrial Designer</td>
<td>10, Nov 2021</td>
<td>$450</td>
</tr>
<tr>
<td colspan="5">
<table class="table table-nowrap mb-0">
<thead class="table-light">
<tr>
<th scope="col">#</th>
<th scope="col">Student</th>
<th scope="col">Course</th>
<th scope="col">Author</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Milana Scot</td>
<td>3d Animation</td>
<td>James Black</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Juston Eichmann</td>
<td>Design syntax</td>
<td>Olimpia Jordan</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bessie Cooper</td>
<td>Graphic Designer</td>
<td>13, Nov 2021</td>
<td>$875</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Leslie Alexander</td>
<td>Product Manager</td>
<td>16, Nov 2021</td>
<td>$410</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bettie Johson</td>
<td>Applications Engineer</td>
<td>24, Nov 2021</td>
<td>$620</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Monkey Karry</td>
<td>Implement new UX</td>
<td>25, Nov 2021</td>
<td>$795</td>
</tr>
</tbody>
</table>
Variants
Use table-
class with below-mentioned color variation class within <tr> to set color on table row.
# | Name | Position | Department |
---|---|---|---|
Default | Monkey Karry | Medical Specialist | Orthopedics |
Primary | James White | Medical Assistant | Surgery |
Secondary | Aaron James | Medical Specialist | Neurology |
Success | Bettie Johson | Medical Specialist | Cardiology |
Danger | Bessie Cooper | Medical Assistant | Surgery |
Warning | Lenora Sandoval | Medical Assistant | Cardiology |
Info | Eric Pierce | Medical Specialist | Neurology |
Light | Ruth Zimmermann | Medical Specialist | Neurology |
Dark | Leslie Alexander | Medical Assistant | Cardiology |
<!-- Variants -->
<table class="table table-nowrap">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Position</th>
<th scope="col">Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Monkey Karry</td>
<td>Medical Specialist</td>
<td>Orthopedics</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>James White</td>
<td>Medical Assistant</td>
<td>Surgery</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Aaron James</td>
<td>Medical Specialist</td>
<td>Neurology</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Bettie Johson</td>
<td>Medical Specialist</td>
<td>Cardiology</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Bessie Cooper</td>
<td>Medical Assistant</td>
<td>Surgery</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Lenora Sandoval</td>
<td>Medical Assistant</td>
<td>Cardiology</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Eric Pierce</td>
<td>Medical Specialist</td>
<td>Neurology</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Ruth Zimmermann</td>
<td>Medical Specialist</td>
<td>Neurology</td>
</tr>
<tr class="table-dark">
<td>Dark</td>
<td>Leslie Alexander</td>
<td>Medical Assistant</td>
<td>Cardiology</td>
</tr>
</tbody>
</table>
Vertical alignment
Table cells of <thead>
are always vertical aligned to the bottom. Table cells in <tbody>
inherit their alignment from <table>
and are aligned to the the top by default. Use the vertical align classes to re-align where needed.
Heading | Heading | Heading | Heading |
---|---|---|---|
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default. |
This cell inherits vertical-align: bottom; from the table row |
This cell inherits vertical-align: bottom; from the table row |
This cell inherits vertical-align: bottom; from the table row |
This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default. |
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
This cell is aligned to the top. | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default. |
<!-- Vertical alignment -->
<div class="table-responsive">
<table class="table align-middle">
<thead>
<tr>
...
</tr>
</thead>
<tbody>
<tr>
...
</tr>
<tr class="align-bottom">
...
</tr>
<tr>
<td>...</td>
<td>...</td>
<td class="align-top">This cell is aligned to the top.</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
Responsive Tables
Use table-responsive
class to make any table responsive across all viewports. Responsive tables allow tables to be scrolled horizontally with ease.
|
ID | Date | Status | Customer | Purchased | Revenue |
---|---|---|---|---|---|---|
|
#VZ2110 | 10 Oct, 14:47 | Paid |
![]()
Jordan Kennedy
|
Mastering the grid | $9.98 |
|
#VZ2109 | 17 Oct, 02:10 | Paid |
![]()
Jackson Graham
|
Splashify | $270.60 |
|
#VZ2108 | 26 Oct, 08:20 | Refunded |
![]()
Lauren Trujillo
|
Wireframing Kit for Figma | $145.42 |
|
#VZ2107 | 02 Nov, 04:52 | Cancel |
![]()
Curtis Weaver
|
Wireframing Kit for Figma | $170.68 |
|
#VZ2106 | 10 Nov, 07:20 | Paid |
![]()
Jason schuller
|
Splashify | $350.87 |
Total | $947.55 |
<div class="table-responsive">
<table class="table align-middle mb-0">
<thead class="table-light">
<tr>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck">
<label class="form-check-label" for="responsivetableCheck"></label>
</div>
</th>
<th scope="col">#</th>
<th scope="col">Date</th>
<th scope="col">Status</th>
<th scope="col">Customer</th>
<th scope="col">Purchased</th>
<th scope="col">Revenue</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck01">
<label class="form-check-label" for="responsivetableCheck01"></label>
</div>
</th>
<td><a href="#" class="fw-semibold">#VZ2110</a></td>
<td>10 Oct, 14:47</td>
<td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
<td>
<div class="d-flex gap-2 align-items-center">
<div class="flex-shrink-0">
<img src="assets/images/users/avatar-3.jpg" alt="" class="avatar-xs rounded-circle" />
</div>
<div class="flex-grow-1">
Jordan Kennedy
</div>
</div>
</td>
<td>Mastering the grid</td>
<td>$9.98</td>
</tr>
<tr>
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck02">
<label class="form-check-label" for="responsivetableCheck02"></label>
</div>
</th>
<td><a href="#" class="fw-semibold">#VZ2109</a></td>
<td>17 Oct, 02:10</td>
<td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
<td>
<div class="d-flex gap-2 align-items-center">
<div class="flex-shrink-0">
<img src="assets/images/users/avatar-4.jpg" alt="" class="avatar-xs rounded-circle" />
</div>
<div class="flex-grow-1">
Jackson Graham
</div>
</div>
</td>
<td>Splashify</td>
<td>$270.60</td>
</tr>
<tr>
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck03">
<label class="form-check-label" for="responsivetableCheck03"></label>
</div>
</th>
<td><a href="#" class="fw-semibold">#VZ2108</a></td>
<td>26 Oct, 08:20</td>
<td class="text-primary"><i class="ri-refresh-line fs-17 align-middle"></i> Refunded</td>
<td>
<div class="d-flex gap-2 align-items-center">
<div class="flex-shrink-0">
<img src="assets/images/users/avatar-5.jpg" alt="" class="avatar-xs rounded-circle" />
</div>
<div class="flex-grow-1">
Lauren Trujillo
</div>
</div>
</td>
<td>Wireframing Kit for Figma</td>
<td>$145.42</td>
</tr>
<tr>
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck04">
<label class="form-check-label" for="responsivetableCheck04"></label>
</div>
</th>
<td><a href="#" class="fw-semibold">#VZ2107</a></td>
<td>02 Nov, 04:52</td>
<td class="text-danger"><i class="ri-close-circle-line fs-17 align-middle"></i> Cancel</td>
<td>
<div class="d-flex gap-2 align-items-center">
<div class="flex-shrink-0">
<img src="assets/images/users/avatar-6.jpg" alt="" class="avatar-xs rounded-circle" />
</div>
<div class="flex-grow-1">
Curtis Weaver
</div>
</div>
</td>
<td>Wireframing Kit for Figma</td>
<td>$170.68</td>
</tr>
<tr>
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck05">
<label class="form-check-label" for="responsivetableCheck05"></label>
</div>
</th>
<td><a href="#" class="fw-semibold">#VZ2106</a></td>
<td>10 Nov, 07:20</td>
<td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
<td>
<div class="d-flex gap-2 align-items-center">
<div class="flex-shrink-0">
<img src="assets/images/users/avatar-1.jpg" alt="" class="avatar-xs rounded-circle" />
</div>
<div class="flex-grow-1">
Jason schuller
</div>
</div>
</td>
<td>Splashify</td>
<td>$350.87</td>
</tr>
</tbody>
<tfoot class="table-light">
<tr>
<td colspan="6">Total</td>
<td>$947.55</td>
</tr>
</tfoot>
</table>
<!-- end table -->
</div>
<!-- end table responsive -->