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>
6 Answers
For those who are using bootstrap4:
Added
.float-{sm,md,lg,xl}-{left,right,none}classes for responsive floats and removed.pull-leftand.pull-rightsince they’re redundant to.float-leftand.float-right.
More information from Bootstrap4 migration notes: Here
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>
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"/>
Bootstrap Uses a 12 column grid:
(Worth the read)
To make sure you don't have this white space you need to be using up all of the columns as I can see 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>
For those who accidentally installed Bootstrap version 4.
It seems like some keywords were changed in Bootstrap version 4. Probably the easiest way is to roll back Bootstrap to version 3. Simply because other parts of your website might also be affected and not work as intended initially.
npm uninstall bootstrap
npm install bootstrap@3
