title: How to place button in center on image in bootstrap 4
body: <p>I want to place three buttons right in the center in the vertical alignment but on the image in Bootstrap 4. I am unable to do so I have also tried with applying <code>position:relative</code> on the image and <code>position:absolute</code> on the buttons but it is also not working.</p>
  
  <pre><code>&lt;div class="container-fluid headerimage" style="padding:0 !important"&gt;
      &lt;div class="col-md-12" style="padding:0 !important"&gt;
        &lt;img src="images/banner.jpg" alt="placeholder 960" class="img-responsive" &gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
     &lt;button class="btn btn-primary"&gt;Teacher&lt;/button&gt;
     &lt;button class="btn btn-success"&gt;Student&lt;/button&gt;
     &lt;button class="btn btn-warning"&gt;Administrator&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is my css code .</p>
  
  <pre><code>.img-responsive{
    width:100% !important;
    border-radius:0 0 5px 5px !important;
  }
  </code></pre>
  
  <p>I am stucked at this point.</p>