Igor Chernega Igor Chernega - 1 month ago 16
CSS Question

Align button group right

This button-group just doesn't want to be aligned. I've tried to add pull-right, text-right, float-right bootstrap classes to

btn-group
div. I've tried to change text-align, padding, margin, float css properties for
buttons
class. Nothing helps. Only if I set padding-left value like
padding-left: 28px
. But that's not what I'm looking for. I need a solution for general case but not to experiment with how much pixels needed for padding-left value.



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row issue">
<div class="title col-md-7">
<a href="https://www.google.com">Google</a>
</div>
<div class="buttons btn-group col-md-5">
<button class="btn btn-success btn-sm">PR</button>
<button class="btn btn-danger btn-sm">DEL</button>
</div>
</div>




Answer Source

Bootstrap by default applies float:left to buttons in a button group. But overwriting that with float:right works perfectly fine ... but than you will have the effect of the elements showing up in reverse order.

If you don’t want that, you can set float: none - and use text-align on the parent element to align the inline buttons.

.buttons { display: block; text-align: right; }
.buttons .btn { float: none; }

https://jsfiddle.net/Lhfhaa2a/1/

I added display:block for the parent element as well here, so that it takes the full width on smaller screen resolutions, too (it originally has display: inline-block set, but that would make it as wide as its content requires only - and if it is only as wide as the buttons make it, you can’t “align” them to either side any more.)