Bootstrap pull-right not working as expected

Question

Simple question here using Bootstrap3. I wanted to create a sort of small filter that reloads the page below it. My requirement was to align this filter (two inputs and a small button) with the content sitting below it, making it fall to the rightest position possible.

I tried using pull-right class and indeed it pulled the filter right but there's still more room to fill. If you check the example I provided below, you'll see that my objective is to align the button with the right side of the purple row, but it fails.

I don't really understand why this happens, but I assume that it's related to some margin/padding issues with the rows.. I'm looking for an answer explaining why this happens so I can understand the problem and won't deal with it again :).

You can check my markup by clicking here on bootply

Also I'll post my markup right here:

<div class="container">
  <div class="row" style="background:slateblue;">
    <div class="col-xs-12">
    <form role="form" class="form-horizontal">
            <div class="form-group pull-right">
                 <div class="col-xs-4">
                        <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>
      </form>
      </div><!-- main col 12-->
  </div><!--row-->
  <div class="row" style="background:slategrey; height:200px;">
  </div>
</div>

Answer 1

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

Answer 2

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.