Bootstrap pull-right not working as expected

Your form-group is aligned as far to the right as possible – but the content within it is not. You have only 4+4+2 wide columns in there, so you are “two columns short”, in the 12-column grid used by bootstrap.

You might want to simply offset the first one of those by 2, by adding col-xs-offset-2 class – then the alignment should be closer to what you want to achieve.

Bootstrap column layout will basically split the row into 12 columns. Here you are only defining 10 out of the twelve columns, which is why you have space left on the right.

Try

<div class="form-group pull-right">
                 <div class="col-xs-4 col-xs-offset-2">
                        <input type="text" class="form-control text-center">
                </div>
                <div class="col-xs-4">
                        <input type="text" class="form-control text-center">
                </div>
                <div class="col-xs-2 col-sm-2" style="margin-top:3px;">
                        <button type="submit" class="btn btn-success">
                            <span class="glyphicon glyphicon-refresh"></span>
                        </button>
                </div>
            </div>

For those who are using bootstrap4:

Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.

More information from Bootstrap4 migration notes: Here

Bootstrap 5 Starting from bootstrap 5, .float-left and .float-right were deprecated and replaced as below:

.float-left was replaced with .float-start to float elements to the left.

.float-right was replaced with .float-end to float elements to the right.

<img src="img/aj-24.jpeg" class="float-start"/>
<img src="img/aj-24.jpeg" class="float-end"/>