How to right align a <img> in Bootstrap 4 card-body?

I am trying to right-align a in a Bootstrap 4 card-body, I tried to leverage the float-right class but it does not seem to work. Is there anything special in regard to images alignment in 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>

Any idea?

Solution

First use col-md-10/col-md-2 and NOT col-10-md/col-2-md

I set col-sm-10 only for snnipet for see the changes

However I think you have to set col-md-4 and col-md-8 but it is for your decision...

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<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-sm-2">
          <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-sm-10">
          <img class="card-img-top" src='https://material.angular.io/assets/img/examples/shiba1.jpg'>
        </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>