How to place a badge in lower right corner of a "media" in bootstrap?

Question

Using the Bootstrap media feature, how can I place a badge in the lower right of the media block's image (so it's on top of the image)?

Answer 1

With such a 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 your badge at the bottom right of the image, but under. If you want it to be a bit over the image, add this css :

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

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

But obviously you can place it wherever you want. If you want it entierly over, try this :
http://jsfiddle.net/6cME7/

FYI, If you resize it breaks the badge size. I guess it gives a general idea but i think it is not fully functionnal.

Answer 2

Hard to tell what you want exactly without having seen your code, but I gave it a shot anyway:

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 using absolute positioning when thing have to be aligned relative to the bottom and/or right, as it is the easiest and most reliable method imo.

A demo: http://www.bootply.com/suRioyheqL