Align button group right - css

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">
Google
</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.)

Answer 3

flex is the best way:
<div style="display:flex">
<div> <button>PR</button></div>
<div> <button>DEL</button></div>
</div>
This aligns the buttons. You can play around this. Do you want spaces? aligned right?

Answer 4

The flexbox method is superior to the float method, which might cause unwanted side-effects.
Bootstrap v5
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"/>
<div class='row g-0'>
<div class='col-md-5 w-auto ms-auto'>
<button class="btn btn-success btn-sm">PR</button>
<button class="btn btn-danger btn-sm">DEL</button>
</div>
</div>
Bootstrap v4.6.0:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"/>
<div class='row no-gutters'>
<div class='col-md-5 w-auto ml-auto'>
<button class="btn btn-success btn-sm">PR</button>
<button class="btn btn-danger btn-sm">DEL</button>
</div>
</div>