<div class="demo-content">
{# djlint:off H021 #}
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="card mb-4">
<div class="card-header">
<h3 class="card-title">Bordered Table</h3>
</div>
<div class="card-body">
<table class="table table-bordered">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>Task</th>
<th>Progress</th>
<th style="width: 40px">Label</th>
</tr>
</thead>
<tbody>
<tr class="align-middle">
<td>1.</td>
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
</div>
</td>
<td>
<span class="badge text-bg-danger">55%</span>
</td>
</tr>
<tr class="align-middle">
<td>2.</td>
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar text-bg-warning" style="width: 70%"></div>
</div>
</td>
<td>
<span class="badge text-bg-warning">70%</span>
</td>
</tr>
<tr class="align-middle">
<td>3.</td>
<td>Cron job running</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar text-bg-primary" style="width: 30%"></div>
</div>
</td>
<td>
<span class="badge text-bg-primary">30%</span>
</td>
</tr>
<tr class="align-middle">
<td>4.</td>
<td>Fix and squish bugs</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar text-bg-success" style="width: 90%"></div>
</div>
</td>
<td>
<span class="badge text-bg-success">90%</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer clearfix">
<ul class="pagination pagination-sm m-0 float-end">
<li class="page-item">
<a class="page-link" href="#">«</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">»</a>
</li>
</ul>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<h3 class="card-title">Condensed Full Width Table</h3>
</div>
<div class="card-body p-0">
<table class="table table-sm">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>Task</th>
<th>Progress</th>
<th style="width: 40px">Label</th>
</tr>
</thead>
<tbody>
<tr class="align-middle">
<td>1.</td>
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
</div>
</td>
<td>
<span class="badge text-bg-danger">55%</span>
</td>
</tr>
<tr class="align-middle">
<td>2.</td>
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar text-bg-warning" style="width: 70%"></div>
</div>
</td>
<td>
<span class="badge text-bg-warning">70%</span>
</td>
</tr>
<tr class="align-middle">
<td>3.</td>
<td>Cron job running</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar text-bg-primary" style="width: 30%"></div>
</div>
</td>
<td>
<span class="badge text-bg-primary">30%</span>
</td>
</tr>
<tr class="align-middle">
<td>4.</td>
<td>Fix and squish bugs</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar text-bg-success" style="width: 90%"></div>
</div>
</td>
<td>
<span class="badge text-bg-success">90%</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4">
<div class="card-header">
<h3 class="card-title">Simple Full Width Table</h3>
<div class="card-tools">
<ul class="pagination pagination-sm float-end">
<li class="page-item">
<a class="page-link" href="#">«</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">»</a>
</li>
</ul>
</div>
</div>
<div class="card-body p-0">
<table class="table">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>Task</th>
<th>Progress</th>
<th style="width: 40px">Label</th>
</tr>
</thead>
<tbody>
<tr class="align-middle">
<td>1.</td>
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
</div>
</td>
<td>
<span class="badge text-bg-danger">55%</span>
</td>
</tr>
<tr class="align-middle">
<td>2.</td>
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar text-bg-warning" style="width: 70%"></div>
</div>
</td>
<td>
<span class="badge text-bg-warning">70%</span>
</td>
</tr>
<tr class="align-middle">
<td>3.</td>
<td>Cron job running</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar text-bg-primary" style="width: 30%"></div>
</div>
</td>
<td>
<span class="badge text-bg-primary">30%</span>
</td>
</tr>
<tr class="align-middle">
<td>4.</td>
<td>Fix and squish bugs</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar text-bg-success" style="width: 90%"></div>
</div>
</td>
<td>
<span class="badge text-bg-success">90%</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<h3 class="card-title">Striped Full Width Table</h3>
</div>
<div class="card-body p-0">
<table class="table table-striped">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>Task</th>
<th>Progress</th>
<th style="width: 40px">Label</th>
</tr>
</thead>
<tbody>
<tr class="align-middle">
<td>1.</td>
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
</div>
</td>
<td>
<span class="badge text-bg-danger">55%</span>
</td>
</tr>
<tr class="align-middle">
<td>2.</td>
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar text-bg-warning" style="width: 70%"></div>
</div>
</td>
<td>
<span class="badge text-bg-warning">70%</span>
</td>
</tr>
<tr class="align-middle">
<td>3.</td>
<td>Cron job running</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar text-bg-primary" style="width: 30%"></div>
</div>
</td>
<td>
<span class="badge text-bg-primary">30%</span>
</td>
</tr>
<tr class="align-middle">
<td>4.</td>
<td>Fix and squish bugs</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar text-bg-success" style="width: 90%"></div>
</div>
</td>
<td>
<span class="badge text-bg-success">90%</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>