Behold my HTML:
<div class="row">
<div class="row-fluid ">
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 SetPadding">
<a href="#" id="button1" "></a>
</div>
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 SetPadding">
<a href="#" id="button2" ></a>
</div>
</div>
<div class="row-fluid ">
<div class="col-md-12 col-xs-12 col-sm-12 col-lg-12 SetPadding textaligncenter">
<a href="#" id="centerbutton" ></a>
</div>
</div>
<div class="row-fluid ">
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 SetPadding">
<a href="#" id="button3" ></a>
</div>
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 SetPadding">
<a href="#" id="button4" ></a>
</div>
</div>
</div>
Here's some CSS
#button1 {background: url('../img/button1.png');background-repeat: no-repeat;background-size: 100% 100%;display: inline-block;width:100%;padding-bottom:45%;}
#button2 {background: url('../img/button2.png');background-repeat: no-repeat;background-size: 100% 100%;display: inline-block;width:100%;padding-bottom:45%;}
**#centerbutton{background: url('../img/buttoncenter.png');background-repeat: no-repeat;background-size: 100% 100%;display: inline-block;width:100%;padding-bottom:45%;}**
#button3 {background: url('../img/button3.png');background-repeat: no-repeat;background-size: 100% 100%;display: inline-block;width:100%;padding-bottom:45%;}
#button4 {background: url('../img/button4.png');background-repeat: no-repeat;background-size: 100% 100%;display: inline-block;width:100%;padding-bottom:45%;}
This is what I expect it to look like
https://i.sstatic.net/CQ3Y8.png
I've attempted absolute positioning for the center button, but resizing the window causes issues.