Hi there! I've encountered a little issue with using Bootstrap3. I was attempting to create a small filter that reloads the content below it. My goal was to align this filter (consisting of two inputs and a button) perfectly with the content underneath, positioning it as far right as possible.
I attempted to use the pull-right class, which did shift the filter to the right, but there is still some empty space left. If you take a look at the example I provided below, you'll notice that I aim to align the button exactly with the right side of the purple row, but it's not quite hitting the mark.
I'm a bit perplexed about why this is happening. I suspect it might be due to margin or padding issues with the rows themselves. I'm seeking an explanation for this behavior so I can comprehend the problem and avoid running into it in the future :).
You can view my code on Bootply by clicking here
Here's the markup for quick reference:
<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>