-
Bootstrap
-
Home
Basic
Add basic class with bootsrtap-table
<div class="table-responsive">
<table class="table table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
<th>Date</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Adi Haziq Bin Ahmad</td>
<td>14-01-2024</td>
<td><span class="color-success">ACTIVE</span>
</td>
<td>
<div class="d-flex">
<a href="#" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil" title="Edit"></i></a>
<a href="#" class="btn btn-danger shadow btn-xs sharp me-1"><i class="fa fa-trash" title="Delete"></i></a>
<a href="#" class="btn btn-secondary shadow btn-xs sharp me-1"><i class="fa fa-eye" title="View"></i></a>
<a href="#" class="btn btn-success shadow btn-xs sharp"><i class="fa-solid fa-toggle-on" title="Click to Deactivate"></i></a>
</div>
</td>
</tr>
<tr>
<th>2</th>
<td>Suria Yasmeen Binti Azfar</td>
<td>14-01-2024</td>
<td><span class="color-success">ACTIVE</span>
</td>
<td>
<div class="d-flex">
<a href="#" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil" title="Edit"></i></a>
<a href="#" class="btn btn-danger shadow btn-xs sharp me-1"><i class="fa fa-trash" title="Delete"></i></a>
<a href="#" class="btn btn-secondary shadow btn-xs sharp me -1"><i class="fa fa-eye" title="View"></i></a>
<a href="#" class="btn btn-success shadow btn-xs sharp"><i class="fa-solid fa-toggle-on" title="Click to Deactivate"></i></a>
</div>
</td>
</tr>
<tr>
<th>3</th>
<td>Afira Lutfiya Binti Azmi</td>
<td>14-01-2024</td>
<td><span class="color-danger">NOT ACTIVE</span>
</td>
<td>
<div class="d-flex">
<a href="#" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil" title="Edit"></i></a>
<a href="#" class="btn btn-danger shadow btn-xs sharp me-1"><i class="fa fa-trash" title="Delete"></i></a>
<a href="#" class="btn btn-secondary shadow btn-xs sharp me-1"><i class="fa fa-eye" title="View"></i></a>
<a href="#" class="btn btn-danger shadow btn-xs sharp"><i class="fa-solid fa-toggle-off" title="Click to Activate"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Table Striped
Add table striped class with bootsrtap-table
<div class="table-responsive">
<table class="table table-striped table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Joining Date</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Adi Haziq Bin Ahmad</td>
<td>14-01-2024</td>
<td><span class="badge badge-success">Paid</span>
</td>
<td>
<div class="d-flex">
<a href="#" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil" title="Edit"></i></a>
<a href="#" class="btn btn-danger shadow btn-xs sharp me-1"><i class="fa fa-trash" title="Delete"></i></a>
<a href="#" class="btn btn-secondary shadow btn-xs sharp"><i class="fa fa-eye" title="View"></i></a>
</div>
</td>
</tr>
<tr>
<th>2</th>
<td>Suria Yasmeen Binti Azfar</td>
<td>14-01-2024</td>
<td><span class="badge badge-warning">Pending</span>
</td>
<td>
<div class="d-flex">
<a href="#" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil" title="Edit"></i></a>
<a href="#" class="btn btn-danger shadow btn-xs sharp me-1"><i class="fa fa-trash" title="Delete"></i></a>
<a href="#" class="btn btn-secondary shadow btn-xs sharp"><i class="fa fa-eye" title="View"></i></a>
</div>
</td>
</tr>
<tr>
<th>3</th>
<td>Afira Lutfiya Binti Azmi</td>
<td>14-01-2024</td>
<td><span class="badge badge-danger">Unpaid</span>
</td>
<td>
<div class="d-flex">
<a href="#" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil"></i></a>
<a href="#" class="btn btn-danger shadow btn-xs sharp me-1"><i class="fa fa-trash"></i></a>
<a href="#" class="btn btn-secondary shadow btn-xs sharp"><i class="fa fa-eye"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
