Абдулах Хамзиќ Абдулах Хамзиќ - 4 months ago 11
CSS Question

How to position a Bootstrap btn-group at the bottom of a page?

Here's the code:

<div class="row">
<div class="col-xs-push-1 col-xs-10 col-sm-4">
<form onsubmit="return false">
...
</form>
</div>
<div class="col-xs-11 col-xs-push-1 col-sm-6 buttons text-center">
<div class="btn-group">
...
</div>
</div>
</div>


So, I have a bootstrap row where a form takes 4 columns (tablet or larger screen) and a button group takes up 6 columns of the row. The button group automatically comes at the top of the right side of the row and I want it to be at the bottom of the right side of the row. I tried the following CSS code (where 'buttons' is the parent div of the button group), but it didn't work:

.buttons{
position: absolute;
}
.btn-group{
position: relative;
bottom: 0;
right: 0;
}


enter image description here

Answer

You should give the btn-group:

.btn-group{
    position: absolute;
    bottom: 0;
    right: 0;
}

and be sure that the parent div.buttons has a:

.buttons{
    position: relative;
}

Give also the parent .row:

.row{
  display:flex;
}
Comments