Bootstrap Pull-right Not Working As Expected


Answer :

For those who are using bootstrap4:

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


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> 

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable