Boostrap/CSS Responsive vertically centered - html

Question

I have 3 <a> with the btn bootstrap class on it.
I found how to center those horizontally and vertically with the above code
HTML
<div class="row row-centered ">
<div class="vertically-centered">
<div class="col-xs-12 col-sm-12">
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Prepare</a>
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#" style="margin-left: 100px; margin-right: 100px;">Handover</a>
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Tuto</a>
</div>
</div>
</div>
CSS
.btn-lg{
padding-top: 50px;
padding-bottom: 50px;
padding-left: 10px;
padding-right:10px;
}
.row-centered {
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font: 0/0 a;
}
.row-centered:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.vertically-centered {
vertical-align: middle;
display: inline-block;
width: 100%;
}
.col-centered {
display: inline-block;
float: none;
}
It works as expected when the screen is wide enough
But it is failing when the screen is smaller (width) than 830px
EDIT
I change the HTML and CSS
HTML MODIFIED
<div class="row row-centered ">
<div class="vertically-centered">
<div class="col-xs-12 col-sm-4 col-md-4">
<a class="btn btn-lg btn-default btn-primary" href="#">Prepare</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<a class="btn btn-lg btn-default btn-primary" href="#">Handover</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<a class="btn btn-lg btn-default btn-primary" href="#">Tuto</a>
</div>
</div>
</div>
CSS MODIFIED
.btn-lg{
padding-top:30px;
padding-bottom:30px;
width:100%;
}
.row-centered {
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font: 0/0 a;
}
.row-centered:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.vertically-centered {
vertical-align: middle;
display: inline-block;
width: 100%;
}
.col-centered {
display: inline-block;
float: none;
}
Now my problem is that I button are aligned above each other (which is nice) but they are going under my nav-background

Answer 1

Change the margin on the middle button to a percentage value:
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#" style="margin-left: 5%; margin-right: 5%;">Handover</a>

Answer 2

I think it is because you use a margin before and after the middle link. What I try to do is solve it with empty columns
<div class="row row-centered ">
<div class="vertically-centered">
<div class="col-xs-12 col-sm-12">
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Prepare</a>
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-1 col-sm-1 col-md-1" href="#"></a>
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Handover</a>
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-1 col-sm-1 col-md-1" href="#"></a>
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Tuto</a>
</div>
</div>
</div>

Answer 3

The problem was that the nav was a custome class instead of the navbar class from boostrap