Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
Past 30 days
| Customer | Plan | MRP |
|---|---|---|
|
|
Team | -$72 |
|
|
Team | $199 |
|
|
Team | -$72 |
|
|
Team | -$72 |
|
|
Team | -$72 |
|
|
Team | -$72 |
|
|
Team | $199 |
|
|
Team | -$72 |
|
|
Team | -$72 |
|
|
Team | -$72 |
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">Link with href </a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Button with data-bs-target</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body customer-body">
<h5 class="mb-2">
$746.5k
<small class="text-success f-w-400">
+20.6 <i class="ti ti-arrow-up"></i>
</small>
</h5>
<p class="text-muted mb-3">Past 30 days</p>
<div class="table-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Customer</th>
<th class="text-end">Plan</th>
<th class="text-end">MRP</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Logicoma</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-star f-16"></i>
</div>
<span class="text-truncate w-100">UAC</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span>$199</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Matsumura</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Logicoma</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-star f-16"></i>
</div>
<span class="text-truncate w-100">UAC</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span>$199</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Matsumura</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text-end">
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div>
</div><a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">Link with href </a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Button with data-bs-target</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body customer-body" data-simplebar="init"><div class="simplebar-wrapper" style="margin: 0px;"><div class="simplebar-height-auto-observer-wrapper"><div class="simplebar-height-auto-observer"></div></div><div class="simplebar-mask"><div class="simplebar-offset" style="right: 0px; bottom: 0px;"><div class="simplebar-content-wrapper" tabindex="0" role="region" aria-label="scrollable content" style="height: auto; overflow: hidden;"><div class="simplebar-content" style="padding: 0px;">
<h5 class="mb-2">
$746.5k
<small class="text-success f-w-400">
+20.6 <i class="ti ti-arrow-up"></i>
</small>
</h5>
<p class="text-muted mb-3">Past 30 days</p>
<div class="table-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Customer</th>
<th class="text-end">Plan</th>
<th class="text-end">MRP</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Logicoma</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-star f-16"></i>
</div>
<span class="text-truncate w-100">UAC</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span>$199</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Matsumura</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Logicoma</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-star f-16"></i>
</div>
<span class="text-truncate w-100">UAC</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span>$199</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Matsumura</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text-end">
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div></div></div></div><div class="simplebar-placeholder" style="width: 1264px; height: 348px;"></div></div><div class="simplebar-track simplebar-horizontal" style="visibility: hidden;"><div class="simplebar-scrollbar" style="width: 0px; display: none;"></div></div><div class="simplebar-track simplebar-vertical" style="visibility: hidden;"><div class="simplebar-scrollbar" style="height: 0px; display: none;"></div></div></div>
</div>
<div class="pc-modal-content"><pre style="display: none;"><code class="hljs html xml"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#offcanvasExample"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"offcanvasExample"</span>></span>Link with href <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">data-bs-target</span>=<span class="hljs-string">"#offcanvasExample"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"offcanvasExample"</span>></span>Button with data-bs-target<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas offcanvas-start"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasExample"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"offcanvasExampleLabel"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-header"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasExampleLabel"</span>></span>Offcanvas<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-close text-reset"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-body customer-body"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>></span>
$746.5k
<span class="hljs-tag"><<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-success f-w-400"</span>></span>
+20.6 <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-arrow-up"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">small</span>></span>
<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted mb-3"</span>></span>Past 30 days<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table-body"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table-responsive"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-hover"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">thead</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Customer<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>Plan<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>MRP<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"></<span class="hljs-name">thead</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tbody</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-arrow-down f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Logicoma<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-star f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>UAC<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>$199<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-wallet f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Biffco<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-arrow-down f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Matsumura<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-wallet f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Biffco<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-arrow-down f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Logicoma<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-star f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>UAC<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>$199<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-wallet f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Biffco<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-arrow-down f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Matsumura<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-wallet f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Biffco<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tbody</span>></span>
<span class="hljs-tag"></<span class="hljs-name">table</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-danger btn-sm"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre><a href="#" class="md-pc-modal-copy copy"><i class="ph-duotone ph-copy"></i></a><a href="#" class="pc-collapse"><i class="ph-duotone ph-code"></i></a></div>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Past 30 days
| Customer | Plan | MRP |
|---|---|---|
|
|
Team | -$72 |
|
|
Team | $199 |
|
|
Team | -$72 |
|
|
Team | -$72 |
|
|
Team | -$72 |
|
|
Team | -$72 |
|
|
Team | $199 |
|
|
Team | -$72 |
|
|
Team | -$72 |
|
|
Team | -$72 |
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<!-- Top Offcanvas start -->
<button class="btn btn-light-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
Top offcanvas <i data-feather="chevrons-up"></i>
</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body py-0">
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<div class="dropdown mb-3 d-inline-block">
<button class="btn btn-light-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div>
<!-- Top Offcanvas end -->
<!-- Right Offcanvas start -->
<button class="btn btn-light-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
Right offcanvas <i data-feather="chevrons-right"></i>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<h5 class="mb-2">
$746.5k
<small class="text-success f-w-400">
+20.6 <i class="ti ti-arrow-up"></i>
</small>
</h5>
<p class="text-muted mb-3">Past 30 days</p>
<div class="table-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Customer</th>
<th class="text-end">Plan</th>
<th class="text-end">MRP</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Logicoma</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-star f-16"></i>
</div>
<span class="text-truncate w-100">UAC</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span>$199</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Matsumura</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Logicoma</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-star f-16"></i>
</div>
<span class="text-truncate w-100">UAC</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span>$199</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Matsumura</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text-end">
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div>
</div>
<!-- Right Offcanvas end -->
<!-- Bottom Offcanvas end -->
<button class="btn btn-light-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">
Bottom offcanvas <i data-feather="chevrons-down"></i>
</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body py-0">
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<div class="dropdown mb-3 d-inline-block">
<button class="btn btn-light-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div>
<!-- Bottom Offcanvas start --><!-- Top Offcanvas start -->
<button class="btn btn-light-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
Top offcanvas <i data-feather="chevrons-up"></i>
</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body py-0">
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<div class="dropdown mb-3 d-inline-block">
<button class="btn btn-light-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div>
<!-- Top Offcanvas end -->
<!-- Right Offcanvas start -->
<button class="btn btn-light-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
Right offcanvas <i data-feather="chevrons-right"></i>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<h5 class="mb-2">
$746.5k
<small class="text-success f-w-400">
+20.6 <i class="ti ti-arrow-up"></i>
</small>
</h5>
<p class="text-muted mb-3">Past 30 days</p>
<div class="table-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Customer</th>
<th class="text-end">Plan</th>
<th class="text-end">MRP</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Logicoma</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-star f-16"></i>
</div>
<span class="text-truncate w-100">UAC</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span>$199</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Matsumura</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Logicoma</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-star f-16"></i>
</div>
<span class="text-truncate w-100">UAC</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span>$199</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-arrow-down f-16"></i>
</div>
<span class="text-truncate w-100">Matsumura</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center text-muted">
<div class="avtar avtar-xs bg-light-secondary flex-shrink-0 me-2">
<i class="ti ti-wallet f-16"></i>
</div>
<span class="text-truncate w-100">Biffco</span>
</div>
</td>
<td class="text-end">
<span class="badge bg-light-success">Team</span>
</td>
<td class="text-end f-w-600">
<span class="text-danger">-$72</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text-end">
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div>
</div>
<!-- Right Offcanvas end -->
<!-- Bottom Offcanvas end -->
<button class="btn btn-light-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">
Bottom offcanvas <i data-feather="chevrons-down"></i>
</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body py-0">
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<div class="dropdown mb-3 d-inline-block">
<button class="btn btn-light-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div>
<!-- Bottom Offcanvas start -->
<div class="pc-modal-content"><pre style="display: none;"><code class="hljs html xml"><span class="hljs-comment"><!-- Top Offcanvas start --></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-secondary"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">data-bs-target</span>=<span class="hljs-string">"#offcanvasTop"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"offcanvasTop"</span>></span>
Top offcanvas <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">data-feather</span>=<span class="hljs-string">"chevrons-up"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas offcanvas-top"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasTop"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"offcanvasTopLabel"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-header"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h5</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasTopLabel"</span>></span>Offcanvas top<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-close text-reset"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-body py-0"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Some Title<span class="hljs-tag"></<span class="hljs-name">h6</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown mb-3 d-inline-block"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-secondary btn-sm dropdown-toggle"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"dropdown"</span>></span>Dropdown button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-menu"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Action<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Another action<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Something else here<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-danger btn-sm"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- Top Offcanvas end --></span>
<span class="hljs-comment"><!-- Right Offcanvas start --></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-secondary"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">data-bs-target</span>=<span class="hljs-string">"#offcanvasRight"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"offcanvasRight"</span>></span>
Right offcanvas <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">data-feather</span>=<span class="hljs-string">"chevrons-right"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas offcanvas-end"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasRight"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"offcanvasRightLabel"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-header"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h5</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasRightLabel"</span>></span>Offcanvas right<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-close text-reset"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-body"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>></span>
$746.5k
<span class="hljs-tag"><<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-success f-w-400"</span>></span>
+20.6 <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-arrow-up"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">small</span>></span>
<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted mb-3"</span>></span>Past 30 days<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table-body"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table-responsive"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-hover"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">thead</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Customer<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>Plan<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
<span class="hljs-tag"><<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>MRP<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"></<span class="hljs-name">thead</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tbody</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-arrow-down f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Logicoma<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-star f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>UAC<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>$199<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-wallet f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Biffco<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-arrow-down f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Matsumura<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-wallet f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Biffco<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-arrow-down f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Logicoma<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-star f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>UAC<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>$199<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-wallet f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Biffco<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-arrow-down f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Matsumura<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avtar avtar-xs bg-light-secondary flex-shrink-0 me-2"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ti ti-wallet f-16"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-truncate w-100"</span>></span>Biffco<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge bg-light-success"</span>></span>Team<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end f-w-600"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>></span>-$72<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
<span class="hljs-tag"></<span class="hljs-name">tbody</span>></span>
<span class="hljs-tag"></<span class="hljs-name">table</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-end"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-danger btn-sm"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- Right Offcanvas end --></span>
<span class="hljs-comment"><!-- Bottom Offcanvas end --></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-secondary"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">data-bs-target</span>=<span class="hljs-string">"#offcanvasBottom"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"offcanvasBottom"</span>></span>
Bottom offcanvas <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">data-feather</span>=<span class="hljs-string">"chevrons-down"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas offcanvas-bottom"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasBottom"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"offcanvasBottomLabel"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-header"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasBottomLabel"</span>></span>Offcanvas bottom<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-close text-reset"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-body py-0"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Some Title<span class="hljs-tag"></<span class="hljs-name">h6</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown mb-3 d-inline-block"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-secondary btn-sm dropdown-toggle"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"dropdown"</span>></span>Dropdown button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-menu"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Action<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Another action<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Something else here<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-danger btn-sm"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- Bottom Offcanvas start --></span></code></pre><a href="#" class="md-pc-modal-copy copy"><i class="ph-duotone ph-copy"></i></a><a href="#" class="pc-collapse"><i class="ph-duotone ph-code"></i></a></div>Try scrolling the rest of the page to see this option in action.
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
This is "Default behavior" of offcanvas.
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Try scrolling the rest of the page to see this option in action.
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<!-- body scrolling start -->
<button class="btn btn-light-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="alert alert-success mb-4" role="alert">
<p class="m-0 fw-bold fs-6">Try scrolling the rest of the page to see this option in action.</p>
</div>
<h4 class="mb-4">Main Title</h4>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<div class="dropdown mb-3 d-inline-block">
<button class="btn btn-light-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div>
<!-- body scrolling end -->
<!-- Enable backdrop start -->
<button class="btn btn-light-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="alert alert-success mb-4" role="alert">
<p class="m-0 fw-bold fs-6">This is "Default behavior" of offcanvas.</p>
</div>
<h4 class="mb-4">Main Title</h4>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<div class="dropdown mb-3 d-inline-block">
<button class="btn btn-light-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div>
<!-- Enable backdrop end -->
<!-- both scrolling end -->
<button class="btn btn-light-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="alert alert-success mb-4" role="alert">
<p class="m-0 fw-bold fs-6">Try scrolling the rest of the page to see this option in action.</p>
</div>
<h4 class="mb-4">Main Title</h4>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<div class="dropdown mb-3 d-inline-block">
<button class="btn btn-light-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div>
<!-- both scrolling start --><!-- body scrolling start -->
<button class="btn btn-light-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="alert alert-success mb-4" role="alert">
<p class="m-0 fw-bold fs-6">Try scrolling the rest of the page to see this option in action.</p>
</div>
<h4 class="mb-4">Main Title</h4>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<div class="dropdown mb-3 d-inline-block">
<button class="btn btn-light-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div>
<!-- body scrolling end -->
<!-- Enable backdrop start -->
<button class="btn btn-light-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="alert alert-success mb-4" role="alert">
<p class="m-0 fw-bold fs-6">This is "Default behavior" of offcanvas.</p>
</div>
<h4 class="mb-4">Main Title</h4>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<div class="dropdown mb-3 d-inline-block">
<button class="btn btn-light-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div>
<!-- Enable backdrop end -->
<!-- both scrolling end -->
<button class="btn btn-light-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="alert alert-success mb-4" role="alert">
<p class="m-0 fw-bold fs-6">Try scrolling the rest of the page to see this option in action.</p>
</div>
<h4 class="mb-4">Main Title</h4>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<h6>Some Title</h6>
<p class="mb-4">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
<div class="dropdown mb-3 d-inline-block">
<button class="btn btn-light-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<button class="btn btn-light-danger btn-sm" data-bs-dismiss="offcanvas">Close</button>
</div>
</div>
<!-- both scrolling start -->
<div class="pc-modal-content"><pre style="display: none;"><code class="hljs html xml"><span class="hljs-comment"><!-- body scrolling start --></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-secondary"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">data-bs-target</span>=<span class="hljs-string">"#offcanvasScrolling"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"offcanvasScrolling"</span>></span>Enable body scrolling<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas offcanvas-start"</span> <span class="hljs-attr">data-bs-scroll</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">data-bs-backdrop</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasScrolling"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"offcanvasScrollingLabel"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-header"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasScrollingLabel"</span>></span>Colored with scrolling<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-close text-reset"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-body"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert alert-success mb-4"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"alert"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-0 fw-bold fs-6"</span>></span>Try scrolling the rest of the page to see this option in action.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Main Title<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Some Title<span class="hljs-tag"></<span class="hljs-name">h6</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Some Title<span class="hljs-tag"></<span class="hljs-name">h6</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Some Title<span class="hljs-tag"></<span class="hljs-name">h6</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown mb-3 d-inline-block"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-secondary btn-sm dropdown-toggle"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"dropdown"</span>></span>Dropdown button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-menu"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Action<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Another action<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Something else here<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-danger btn-sm"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- body scrolling end --></span>
<span class="hljs-comment"><!-- Enable backdrop start --></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-secondary"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">data-bs-target</span>=<span class="hljs-string">"#offcanvasWithBackdrop"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"offcanvasWithBackdrop"</span>></span>Enable backdrop (default)<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas offcanvas-start"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasWithBackdrop"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"offcanvasWithBackdropLabel"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-header"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasWithBackdropLabel"</span>></span>Offcanvas with backdrop<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-close text-reset"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-body"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert alert-success mb-4"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"alert"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-0 fw-bold fs-6"</span>></span>This is "Default behavior" of offcanvas.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Main Title<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Some Title<span class="hljs-tag"></<span class="hljs-name">h6</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Some Title<span class="hljs-tag"></<span class="hljs-name">h6</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Some Title<span class="hljs-tag"></<span class="hljs-name">h6</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown mb-3 d-inline-block"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-secondary btn-sm dropdown-toggle"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"dropdown"</span>></span>Dropdown button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-menu"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Action<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Another action<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Something else here<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-danger btn-sm"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- Enable backdrop end --></span>
<span class="hljs-comment"><!-- both scrolling end --></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-secondary"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">data-bs-target</span>=<span class="hljs-string">"#offcanvasWithBothOptions"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"offcanvasWithBothOptions"</span>></span>Enable both scrolling &amp; backdrop<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas offcanvas-start"</span> <span class="hljs-attr">data-bs-scroll</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasWithBothOptions"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"offcanvasWithBothOptionsLabel"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-header"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvasWithBothOptionsLabel"</span>></span>Backdroped with scrolling<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-close text-reset"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"offcanvas-body"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert alert-success mb-4"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"alert"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-0 fw-bold fs-6"</span>></span>Try scrolling the rest of the page to see this option in action.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Main Title<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Some Title<span class="hljs-tag"></<span class="hljs-name">h6</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Some Title<span class="hljs-tag"></<span class="hljs-name">h6</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Some Title<span class="hljs-tag"></<span class="hljs-name">h6</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span>></span>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown mb-3 d-inline-block"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-secondary btn-sm dropdown-toggle"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">data-bs-toggle</span>=<span class="hljs-string">"dropdown"</span>></span>Dropdown button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-menu"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Action<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Another action<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown-item"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Something else here<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-light-danger btn-sm"</span> <span class="hljs-attr">data-bs-dismiss</span>=<span class="hljs-string">"offcanvas"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- both scrolling start --></span></code></pre><a href="#" class="md-pc-modal-copy copy"><i class="ph-duotone ph-copy"></i></a><a href="#" class="pc-collapse"><i class="ph-duotone ph-code"></i></a></div>
