Bootstrap pull-right does not work as expected

Question

A simple question is here using Bootstrap3 . I wanted to create a 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 under it, which makes it possible in the rightmost position .

I tried using the pull-right class, and indeed, it pulled the filter to the right, but even more space to fill. If you check the example below, you will see that my goal is to align the button on the right side of the purple line , but it fails.

I really don’t understand why this is happening, but I assume that this is due to some problems with stock / row filling. I am looking for an answer explaining why this is happening, so I can understand the problem and won't deal with it again :).

You can check my markup by clicking here on bootply

I also posted 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

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

You can simply shift the first one by 2 by adding the col-xs-offset-2 class - then the alignment should be closer to what you want to achieve.

Answer 2

For those using bootstrap4:

classes for responsive floats and removed .pull-left and .pull-right since they are redundant for .float-left and .float-right.

Additional information from Bootstrap4 boot notes: Here

Answer 3

The Bootstrap column layout basically splits the row into 12 columns. Here you define only 10 of the twelve columns, so you have free space 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> 

Answer 4

Bootstrap Uses a 12-column grid:

http://getbootstrap.com/css/#grid (worth reading)

To make sure you don’t have this space, you need to use all columns as I see that you are not

Here is how I would do your code:

 <div class="container"> <div class="row" style="background:slateblue;"> <div class="col-xs-12"> <form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-5"> <input type="text" class="form-control text-center"> </div> <div class="col-xs-5"> <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> </div> </div>