Move Image to Right of Card in Bootstrap - css

Question

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.
Using the Bootstrap Documentation, this is what I've done.
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">...</h5>
<p class="card-text">....</p>
Go somewhere
<img class="float-right" src="Images/template.png" alt="sans" width=200px/>
</div>
</div>
</div>
Float-right doesn't help, as we want the image to be completely on the right side of the card.
This is what it looks like: enter image description here
And this is what it should look like enter image description here

Answer 1

In the picture where is should look like you have two columns of content.
text and image.
So let's try:
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="row card-body">
<div class="col-sm-6">
<h5 class="card-title">...</h5>
<p class="card-text">....</p>
Go somewhere
</div>
<img class="col-sm-6" src="Images/template.png" alt="sans"/>
</div>
</div>
</div>

Answer 2

Use the grid row&cols inside the card-body...
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<h5 class="card-title">Title</h5>
<p class="card-text">Some text ehre</p>
Go somewhere
</div>
<div class="col-sm-6 text-right">
<img class="" src="//placehold.it/200" alt="sans" width="200px">
</div>
</div>
</div>
</div>
</div>
</div>
Or, use flexbox (d-flex) with 2 containers...
Demo: https://www.codeply.com/go/0FzyCXffUd

Answer 3

Here is how I solved it with Bootstrap 5. I wanted the image on the right for large screens but on top for anything smaller.
The secret sauce seem to be row + flex-row-reverse + card-img-end, for an image on the right.
<div class="container my-5">
<div class="card row flex-row-reverse">
<img class="col-lg-4 card-img-end img-fluid p-0" src="https://picsum.photos/300/200" />
<div class="col-lg-8 card-body">
<h1 class="card-title">Blog entry</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
If you want the image on the left the sauce is row + flex-row + card-img-start.
<div class="container my-5">
<div class="card row flex-row">
<img class="col-lg-4 card-img-start img-fluid p-0" src="https://picsum.photos/300/200" />
<div class="col-lg-8 card-body">
<h1 class="card-title">Blog entry</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>

Answer 4

I find display flex useful. You will need to fiddle with the column sizing to cater for your image size.
.card-body {
display: flex;
flex-wrap: nowrap;
}
.card-body>div {
padding: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div>
<h5 class="card-title">Title</h5>
<p class="card-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
Go somewhere
</div>
<div>
<img src="https://picsum.photos/100/100" alt="sans" />
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>