Boostrap: How to "stick" a button over an image when re-sizing

Question

I have an image in which I need to put a button over, the problem is that I don't know how to place the button and automatically re-size and position it when making the browser smaller, right now I have the button in place, but when I re-size the browser to get smaller the button moves, I tried using percentages in the css buy doesn't work, what can I do?

<div id="discover" class="container-fluid">
<div class="row-fluid"> 
  <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 withimg">
    <img id="discoveryour" src="img/x.png" class="img-responsive">
  </div>  
</div>
<div class="row-fluid"> 
  <div id="bttnimg" class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<form id="start" method="post" action="x.php">
<button class="btn-primary">text</button>
</form> 
</div>
</div>
</div> 

Css:

  .withimg {
  width: 100%;
  overflow:hidden;
  padding: 0px;
  margin: 0px;
 }

  #discover{
  position: relative;  
 }

#bttnimg{
float: left;
position: absolute;
left: 62%;
top: 25%;
max-width: 750px;

 }

Answer 1

Ah, the good old "how to overlay stuff on top of a responsive image -- responsively" question.

A little tricky, but not too bad. The tricky bit is how to make the stuff's vertical position responsive when the image size changes.

Fear not, here's one simple way to do this:

HTML:

<div class="img-wrapper">
  <img class="img-responsive"
       src="http://lorempixel.com/output/people-q-c-1200-400-4.jpg">
  <div class="img-overlay">
    <button class="btn btn-md btn-success">Button</button>
  </div>
</div>

CSS:

.img-wrapper {
  position: relative;
}

.img-responsive {
  width: 100%;
  height: auto;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.img-overlay:before {
  content: ' ';
  display: block;
  /* adjust 'height' to position overlay content vertically */
  height: 50%;
}

The img-overlay:before pseudo-class handles the vertical positioning job by pushing the img-overlay div down from the top of the image. In this example, the top of the button will always be 50% down the image (change the height: 50% attribute if you want the button higher or lower).

jsfiddle

To make the button size responsive to window width, you can create a new class for your button. Let's call it btn-responsive (this replaces btn-md in the example above). Then use @media queries to adjust the btn-responsive attributes for different window widths. Something like this:

.btn-responsive {
  /* matches 'btn-md' */
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

@media (max-width:760px) {
  /* matches 'btn-xs' */
  .btn-responsive {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}

and so forth for other screen widths.

Answer 2

In case you're wondering how to do this with bootstrap 5 (like me), there are new classes that do the trick. For instance, I did this to put a button floating right top over the image (I also use font-awesome but you can use any text/icon you like for the button):

<div class="card">
    <img class="card-img-top img-thumbnail" src="someimage.png" alt="alt text">
    <div class="card-img-overlay">
        <a href="#" class="btn btn-outline-warning btn-sm float-end"
           data-bs-toggle="popover" data-bs-content="Edit image" data-bs-trigger="hover focus">
            <i class="far fa-edit"></i>
        </a>
    </div>

    <div class="card-body">
        <h5 class="card-title">Some title</h5>
        <p class="card-text">Some text</p>      
    </div>
</div>

Check out the official bootstrap documentation for more info.