title: How to right align a <img> in Bootstrap 4 card-body?
body: <p>I am trying to right-align a  in a Bootstrap 4 <code>card-body</code>, I tried to leverage the <code>float-right</code> class but it does not seem to work. Is there anything special in regard to images alignment in <code>card-body</code>?</p>
  
  <pre><code>&lt;div class="card border-primary m-3" *ngIf='product'&gt;
    &lt;div class="card-header bg-primary text-light text-center"&gt;
        {{ pageTitle + ': ' + product?.productName }}
    &lt;/div&gt;
    &lt;div class="card-body"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-2-md"&gt;
            &lt;table&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;Id:&lt;/td&gt;
                  &lt;td&gt;{{ product.productId }}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Name:&lt;/td&gt;
                  &lt;td&gt;{{ product.productName }}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Code:&lt;/td&gt;
                  &lt;td&gt;{{ product.productCode }}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Release Date:&lt;/td&gt;
                  &lt;td&gt;{{ product.releaseDate }}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Price:&lt;/td&gt;
                  &lt;td&gt;{{ product.price }}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Description:&lt;/td&gt;
                  &lt;td&gt;{{ product.description }}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Rating:&lt;/td&gt;
                  &lt;td&gt;
                    &lt;app-star 
                    [rating]='product.starRating'&gt;&lt;/app-star&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="col-10-md"&gt;
            &lt;img class="card-img-top float-right" [src]='product.imageUrl'&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;div class="card-footer"&gt;
      &lt;button class="btn btn-secondary" (click)='onBackClicked()'&gt; &lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt; Back to List&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any idea?</p>