CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Michael
Michael

Reputation: 11

Button over responsive issue with Bootstrap

I have been struggling for a couple of days to place a button over a responsive image using Twitter Bootstrap. I am trying to get the button on the image as follows: http://photostand.co.za/images/9h1s1sci8ba9mnymt2e3.gif

However, the button is placed at the edge of the grid column: http://photostand.co.za/images/qeji7svio531p97dcsp2.gif

This is my code:

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
<div class="col-sm-3">
    <div class="center-block" style="max-width:100px;display:relative"> <!-- image width is 100px -->
       <img class="img-responsive center-block" src="http://lorempixel.com/100/300/" alt="Random Image">
       <button type="button" class="btn btn-default" style="position:absolute;top:0px;right:0px"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span></button>
     </div>
 </div>
 <div class="col-sm-3">
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div>
</div><!--/row-->

I'm sure the answer is simple, but I'm not coming right. Thanks in advance.

Upvotes: 0

Views: 93

Answers (1)

David Nguyen
David Nguyen

Reputation: 8528

the parent block should be position: relative not display: relative

Upvotes: 5

Related Questions