I'm having trouble getting three buttons to align vertically in the center of an image using Bootstrap 4. I've tried using position:relative on the image and position:absolute on the buttons, but it's not working as expected.
<div class="container-fluid headerimage" style="padding:0 !important">
<div class="col-md-12" style="padding:0 !important">
<img src="images/banner.jpg" alt="placeholder 960" class="img-responsive" >
</div>
<div class="container">
<button class="btn btn-primary">Teacher</button>
<button class="btn btn-success">Student</button>
<button class="btn btn-warning">Administrator</button>
</div>
</div>
This is my current CSS code:
.img-responsive{
width:100% !important;
border-radius:0 0 5px 5px !important;
}
I'm stuck at this point and would appreciate any help or suggestions.