Achill Achill - 4 years ago 76
HTML Question

Bootstrap: Image will not right align

I'm working on this on Codepen as I'm new to Bootstrap & its a good site to practice on for a novice like myself.

I'm trying to right align an image in the bottom right hand corner but am failing. From my own research on this I'm not sure if the "pull-right" can/should(?) be used. What puzzles me is that the code for the image left aligned works fine, so what am I missing from the code for the right align image?

<body>
<!--
This section sets the left top image
-->
<div class = "media">
<div class = "media-left">
<img src="//c1.staticflickr.com/6/5191/7094248657_1cde1542b4_z.jpg" class="media-object" style="width:250px">
</div>

<!--
This section contains the heading & any additional text added
-->
<div class = "media-body">
<div class = "heading">
<h2 class = "media-heading">SWIMMING</h2></div>
<p>A great way to unwind.</p>
</div>

<!--
This section contains the top right image
-->
<div class = "media-right">
<img src="//c1.staticflickr.com/6/5560/31273130652_169a8d4eae_k.jpg" class="media-object" style="width:250px">
</div>

<br>
<br>

<!--
This section contains the centre image
-->
<div class = "bikini">
<div class="row-fluid">
<div class="span12 bikini">

<img class = "center-block img-responsive" src="http://c1.staticflickr.com/6/5090/5283880278_506cd08780_b.jpg" style="width:300px"> </div>
</div>
</div>
</div>
<br>
<br>

<!--
This section contains the lower left image
-->
<div class = "media">
<div class = "media-left">
<img class="media-object pull-left" src="//c1.staticflickr.com/7/6224/6345332948_ccd0793d3c_b.jpg" class="media-object" style="width:250px">
</div>
</div>

<!--
This section contains the lower right image
-->
<div class = "media">
<div class = "media-right">
<img class = "media-object pull-right" src="//c1.staticflickr.com/4/3152/2349904544_b8534c5b4e_b.jpg" class="media-object" style="width:250px">

</div>
</div>


</body>

Answer Source

First of all for the future, please format your code! It makes it more readable and we could faster help you to solve the issue.

And now to your problem. The first one was that you two div's were wrong placed. If that was solved pull-right works like a charm (if bootstrap.css is included), but to place in every single row the image I used the bootstrap class col-xs-12. (read more about the grid-system here)

working solution: jsfiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download