Why can't I align content inside bootstrap column? - css

Question

I've set relative position for my row and then I tried to align my social buttons to the bottom right corner but failed ;(
I've also set absolute position for my social buttons class and it doesn't seem to align properly. Why is this so?
JsFiddle
HTML
<div class="container">
<div class="jumbotron">
<div class="row fixed-height">
<div class="col-xs-4">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok"></span>
Some button!
</button>
</div>
<div class="col-xs-8">
<div class="social-buttons">
<div class="btn-group-xs">
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-up"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-down"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
margin: 10px;
}
.row {
margin: 8px 0;
border: solid;
}
.fixed-height {
height: 100%;
}
.social-buttons{
position: absolute;
bottom: 0;
right: 0;
}

Answer 1

Here is a possible solution:http://jsfiddle.net/cpveg8Lo/5/
CSS
Add position as relative in row css
.row {
margin: 2px 0;
border: solid;
position: relative;
}
and make the following change in social button css
.social-buttons{
position:absolute;
right: 0;
padding-right:0px;
bottom:0;
}
HTML
Update your html as shown below,
<div class="container">
<div class="jumbotron">
<div class="row fixed-height">
<div class="col-xs-4">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok"></span>
Some button!
</button>
</div>
<div class="col-xs-8 social-buttons">
<div class="pull-right">
<div class="btn-group-xs">
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-up"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-down"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

Here check this snippet. This will keep those button vertically centered as well. Try this -
.jumbotron {
margin: 10px;
}
.row {
margin-top: 8px;
margin-bottom: 8px;
border: solid;
}
.fixed-height {
height: 100%;
position:relative;
}
.social-buttons{
position:absolute;
right:15px;
top: 50%;
-moz-transform: translatey(-50%);
-ms-transform: translatey(-50%);
-o-transform: translatey(-50%);
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="jumbotron">
<div class="row fixed-height">
<div class="col-xs-4">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok"></span>
Some button!
</button>
</div>
<div class="social-buttons">
<div class="btn-group-xs">
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-up"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-down"></span>
</button>
</div>
</div>
</div>
</div>
</div>