Pull the image on the right in the container

Question

I have a logo that I want to place in the right container in the front 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 IS logo is shown on the left side of the first line with some fields. Now add the pull-right class to my div as follows:

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

and the logo aligns to the right of the browser window with no margins. How do I place the logo on the right side of the first line, like on the left side?

thanks

Answer 1

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

 <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 the columns to switch places without changing the order of the <div> , you should use .col-*-pull-* and .col-*-push-* . They will respect the column drains:

 <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> 

Of course, you can combine both.

(By the way, do not set alt-text to "Logo" in your final design, set it to something useful, such as the name of the company).