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

css, twitter-bootstrap

Solution

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.

Problem

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

Original source