Align button group right

Question

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 1

bootstrap 4

  <div class="text-right"> 
      <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 2

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.)