Responsive slider buttons - html

Question

Im trying to position some buttons below a slider and I can do so, but the entire site is responsive (botstrap) except for these buttons. So I'm trying to make them so.
I have been trying to work with percents to position them and create fluid heights and widths, but I have had no luck. All I can seem to do is position them on top of one another.
My html looks like this
<div class="col-md-12 sliderBar">
<img src="assets/img/aboutPage.png" alt="" />
</div><!--.col-md-12-->
<div class="col-md-12 sliderNav">
<div class="container">
<button> < </button>
<button>Sponges</button>
<button>DBM</button>
<button>Synthetics</button>
<button> > </button>
</div><!--.container-->
</div><!--.col-md-12-->
and my css looks like this
.sliderNav{
background-color: #1b1a29;
text-align: center;
position:relative;
padding-bottom:3%;
height:0;
overflow:hidden;
}
.sliderNav button{
position:absolute;
width:20%;
height:100%;
}
Any help would be great! I have a fiddle set up here.

Answer 1

this what you want? fiddle
the changes i made are position to relative for button, set button width 15%.. let me know if works :)
here is the code i modified:
.container button{
position:relative;
width:15%;
height:100%;
}

Answer 2

Try this (no additional css needed):
<div class="container">
<div class="col-md-12 sliderBar">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/41/Blank_Earth_Banner.jpg" alt="" class="img-responsive" />
</div><!--.col-md-12-->
<div class="col-md-12">
<div class="btn-group btn-group-justified">
<a class="btn btn-default"> < </a>
<a class="btn btn-default">Sponges</a>
<a class="btn btn-default">DBM</a>
<a class="btn btn-default">SYNTECHICS</a>
<a class="btn btn-default"> > </a>
</div>
</div>
</div>