Basic

Add basic class with bootsrtap-table

# Name Joining Date Status Action
1 Adi Haziq Bin Ahmad 14-01-2024 ACTIVE
2 Suria Yasmeen Binti Azfar 14-01-2024 ACTIVE
3 Afira Lutfiya Binti Azmi 14-01-2024 NOT ACTIVE

	<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

# Name Joining Date Status Action
1 Adi Haziq Bin Ahmad 14-01-2024 Paid
2 Suria Yasmeen Binti Azfar 14-01-2024 Pending
3 Afira Lutfiya Binti Azmi 14-01-2024 Unpaid

<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>