How to place the icon in the lower right corner of the "media" in bootstrap?

Question

Using the Bootstrap media function, how can I place the badge in the lower right corner of the image of the media block (so this is on top of the image)?

Answer 1

With this markup:

<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/64x64" /> <span class="badge badge-success pull-right">2</span> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> My content </div> </div> 

You have an icon in the lower right corner of the image, but at the bottom. If you want this a bit compared to the image, add this css:

 .media img+span.badge { position: relative; top: -8px; left: 8px; } 

See this script: http://jsfiddle.net/d7kXX/

But obviously you can place it wherever you want. If you want this to be complete, try the following:
http://jsfiddle.net/6cME7/

FYI. If you resize, this will break the size of the icon. I think this gives a general idea, but I think that it is not fully functional.

Answer 2

It's hard to say what you want without looking at the code, but I still gave it:

HTML

  <div class="media"> <a class="pull-left relative" href="#"> <img class="media-object" src="http://placekitten.com/200/150" /> <span class="label label-warning bottom-right">Cute kitten</span> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> Cras sit amet </div> </div> 

CSS

 .relative { position: relative; } .label.bottom-right { position: absolute; right: 2px; bottom: 2px; } 

I prefer to use absolute positioning when the thing needs to be aligned with the bottom and / or right, as this is the simplest and most reliable imo method.

Demo: http://www.bootply.com/suRioyheqL