'Bootstrap 4 - how to make image go to right hand side?

I am trying to put a simple image in a row and make it to to the right side of the page.

If I wanted to do this with text, I would simply do this:

<div clas="row">
    <div class="col text-right">
        <h1>Im on the right</h1>
    </div>
</div>

There does not seem to be the equivalent image-right. There is float-right, but this pulls the text underneath up, which is not what we want.

Tried this, but it has no effect:

<div class="row">
    <div class="col">
        <img src="images/MyLogo.png" class="pull-right" style="height: 200px" alt="our Logo">
    </div>
</div>

Being an old school html table user, I thought I could create dummy empty columns to the left, although this is not what we want as columns "break" when the screen gets smaller:

<div class="row">
    <div class="col-xs-10">
        <div>
            <div class="col-xs-2">
                <img src="images/MyLogo.png"  style="height: 200px" alt="our Logo">
        </div>
    </div>
</div>

But this also keeps the image stuck firmly to the left side.

Any suggestions how to put an image on the right side of the page, keeping the space to the left of it blank?

bootstrap-4

Solution 1:^[1]

It's not very clear what's your goal here (adding more details or providing the exact html code might clear things up), but if i understood you correctly you need an image to take the whole row and float to the right, and space to the left of your image should be empty. If that's the case this should work fine for you:

<div class="row">
  <div class="col">
    <img src="images/MyLogo.png" class="pull-right" style="height: 200px" alt="our Logo">
  </div>
</div>

.col {
text-align: right;
}
.pull-right {
margin: 0 0 0 auto;
}

Solution 2:^[2]

You can use flex utilities d-flex justify-content-end:

<div class="row">
    <div class="col d-flex justify-content-end">
        <img src="" alt="">
    </div>
</div>

Reference Bootstrap DOCS

Solution 3:^[3]

You can use rounded float-right instead of pull-right:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="row">
    <div class="col">
        <img src="https://dummyimage.com/150x100/000/fff" class="rounded float-right"  alt="our Logo">
    </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	rybchenko95
Solution 2
Solution 3	gaetanoM

'Bootstrap 4 - how to make image go to right hand side?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]