Pull right an image within container

Question

I have a logo that I want place it in right of my container in first row. First I wrote this code:

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <img src="../Images/logo.png" alt="Logo"/>
        </div>
        <div class="col-md-9">
        </div>
    </div>
</div>    

and the logo IS shown in left side of first row with some margins. Now I add pull-right class to my div like this:

<div class="col-md-3 pull-right">
     <img src="../Images/logo.png" alt="Logo"/>
</div>

and the logo aligns to right side of the browser window without any margins. How I place logo on right side of first row like left side?

Thanks

Answer 1

If you want to pull the image to the right you need to pull the image, not the row:

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

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <img src="../Images/logo.png" alt="Logo" class="pull-right"/>
        </div>
        <div class="col-xs-6">
          Column 2
        </div>
    </div>
</div>

If you want to the columns to switch places without changing the order of the <div>s you should use .col-*-pull-* and .col-*-push-*. They will respect the column gutters:

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

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-xs-push-6">
            <img src="../Images/logo.png" alt="Logo"/>
        </div>
        <div class="col-xs-6 col-xs-pull-6">
          Column 2
        </div>
    </div>
</div>

You can of course combine the two as well.

(By the way, don't set the alt-text to "Logo" in your final design, set it to something useful, like the company name).