title: Move Image to Right of Card in Bootstrap
body: <p>Basically, I am having trouble figuring out how to move an image to the right of a card using bootstrap, similar to the function of card-img-top or bottom.</p>
  
  <p>Using the <a href="https://getbootstrap.com/docs/4.0/components/card/" rel="nofollow noreferrer">Bootstrap Documentation</a>, this is what I've done.</p>
  
  <pre><code> &lt;div class="row"&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;div class="card"&gt;
                          &lt;div class="card-body"&gt;
                              &lt;h5 class="card-title"&gt;...&lt;/h5&gt;
                              &lt;p class="card-text"&gt;....&lt;/p&gt;
                              &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
                              &lt;img class="float-right" src="Images/template.png" alt="sans" width=200px/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Float-right doesn't help, as we want the image to be completely on the right side of the card. </p>
  
  <p>This is what it looks like: <a href="https://i.stack.imgur.com/y5BgV.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>And this is what it <strong>should</strong> look like <a href="https://i.stack.imgur.com/ijgec.png" rel="nofollow noreferrer">enter image description here</a></p>