I am having difficulty aligning an image to the right within a Bootstrap 4 card-body. I attempted to use the float-right class, but it doesn't seem to be working. Are there any specific considerations for aligning images in a card-body?
<div class="card border-primary m-3" *ngIf='product'>
<div class="card-header bg-primary text-light text-center">
{{ pageTitle + ': ' + product?.productName }}
</div>
<div class="card-body">
<div class="row">
<div class="col-2-md">
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Id:</td>
<td>{{ product.productId }}</td>
</tr>
<tr>
<td>Name:</td>
<td>{{ product.productName }}</td>
</tr>
<tr>
<td>Code:</td>
<td>{{ product.productCode }}</td>
</tr>
<tr>
<td>Release Date:</td>
<td>{{ product.releaseDate }}</td>
</tr>
<tr>
<td>Price:</td>
<td>{{ product.price }}</td>
</tr>
<tr>
<td>Description:</td>
<td>{{ product.description }}</td>
</tr>
<tr>
<td>Rating:</td>
<td>
<app-star
[rating]='product.starRating'></app-star>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-10-md">
<img class="card-img-top float-right" [src]='product.imageUrl'>
</div>
</div>
</div>
<div class="card-footer">
<button class="btn btn-secondary" (click)='onBackClicked()'> <i class="fa fa-chevron-left"></i> Back to List</button>
</div>
</div>
Are you familiar with this issue?