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!
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;
}
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
<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 ?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.