3

I want to do something like that :

enter image description here

For now, I'm using margin but I'm sure there is some "clean" method to do that... : http://jsfiddle.net/vXMMA/445/

<ul class="media-grid">
  <li>
    <a href="#">
        <img class="thumbnail" src="http://placehold.it/140x90" alt=""/>
    </a>
    <a href="#" class="btn" style="margin-left:-23px;margin-top:67px;">+</a>
  </li> 
  <li>
    <a href="#">
        <img class="thumbnail" src="http://placehold.it/140x90" alt=""/>
    </a>
    <a href="#" class="btn" style="margin-left:-23px;margin-top:67px;">+</a>
  </li>       

</ul>
user2178964
  • 124
  • 6
  • 16
  • 40

2 Answers2

9

How about this

<ul class="media-grid">
  <li>
    <a href="#" style="position:relative;">
        <img class="thumbnail" src="http://placehold.it/140x90" alt=""/>
        <button class="btn" style="position:absolute;bottom:5px;right:5px;margin:0;padding:5px 3px;">+</button>
    </a>
  </li> 
  <li>
    <a href="#" style="position:relative;">
        <img class="thumbnail" src="http://placehold.it/140x90" alt=""/>
        <button class="btn" style="position:absolute;bottom:5px;right:5px;margin:0;padding:5px 3px;">+</button>
      </a>
  </li>
</ul>

http://jsfiddle.net/xKrXn/1/

M.G.Manikandan
  • 953
  • 5
  • 7
  • 1
    But this isn't really Bootstrap-specific, and the problem is, this isn't really responsive, which is one of the main points of using Bootstrap. – jbyrd Jun 01 '15 at 13:10
  • This isn't valid HTML in that you shouldn't have a `button` within an `a` element. See http://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5. Instead, you can make them siblings within the `li`. – jon_wu Feb 15 '17 at 16:21
2

try this one:

ul.media-grid li {
  position: relative;
  display: inline-block;
}

.btn {
  position: absolute;
  bottom: 10px;
  right: 6px;
}

.media-grid a {
  float: none;
  display: inline-block;
}

http://jsfiddle.net/vXMMA/446/

hmhcreative
  • 495
  • 4
  • 9