How to vertically aligned to middle with bootstrap? - html

Question

I am trying to create a layout to make two up and down arrows stacks on top of another. Currently the arrows are aligned horizontally. I am not sure how to make it stacked and vertically aligned to middle along with the Title text. How do I do this?
<div class="row">
<div class="col-xs-8">Title</div>
<div class="col-xs-4">
<a href="">
<div class="glyphicon glyphicon-menu-up"></div>
</a>
<a href="">
<div class="glyphicon glyphicon-menu-down"></div>
</a>
</div>
</div>
CSS
.wrapper {
padding:20px;
background-color:green;
color:white;
}
a div {
color:white;
}
https://jsfiddle.net/371yuk1r/2/
Thanks a lot!

Answer 1

One solution without using class from bootstrap is to add display: table-row; to a element like:
html
<div class="row">
<div class="col-xs-8">Title</div>
<div class="col-xs-4">
<a href="" class="arrowVert">
<div class="glyphicon glyphicon-menu-up"></div>
</a>
<a href="">
<div class="glyphicon glyphicon-menu-down"></div>
</a>
</div>
</div>
css
.arrowVert {
display: table-row;
}
fiddle

Answer 2

There are some helper classes in Bootstrap, which you can use for your code.
Check out these link please: http://getbootstrap.com/css/#helper-classes-center

Answer 3

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-8">Title</div>
<div class="col-xs-4">
<a href="#">
<div class="glyphicon glyphicon-menu-up"></div>
</a>
<div class="clearfix"></div>
<a href="#">
<div class="glyphicon glyphicon-menu-down"></div>
</a>
</div>
</div>
You want like this ?