In the newest version the pull-left and pull-right have been replaced by .pull-{xs,sm,md,lg,xl}-{left,right,none}
That means that instead of writing a simple class="pull-right", I will have now to write class="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"
Is there a less tedious way to do it?
The classes are float-right float-sm-right etc.
The media queries are mobile-first, so using float-sm-right would affect small screen sizes and anything wider, so there's no reason to add a class for each width. Just use the smallest screen you want to affect or float-right for all screen widths.
Official Docs:
Classes: https://getbootstrap.com/docs/4.6/utilities/float/
Updating: https://getbootstrap.com/docs/4.6/migration/#utilities
If you are updating an existing project based on an earlier version of Bootstrap, you can use sass extend to apply the rules to the old class names:
.pull-right {
@extend .float-right;
}
.pull-left {
@extend .float-left;
}
With Bootstrap 5, float classes still exist, but -left and -right are replaced with -start and -end.
Responsive versions are still available such as .float-md-start, .float-lg-none.
Official Bootstrap 5 float docs: https://getbootstrap.com/docs/5.2/utilities/float/
Update 2021 (as of Bootstrap 5)
Because of new RTL support, float-left and float-right have been replaced with float-start and float-end in Bootstrap 5.
Update 2018 (as of Bootstrap 4.3)
Yes, pull-left and pull-right have been replaced with float-left and float-right in Bootstrap 4.
However, floats will not work in all cases since Bootstrap 4 is now flexbox.
To align flexbox children to the right, use auto-margins (ie: ml-auto) or the flexbox utils (ie: justify-content-end, align-self-end, etc..).
Navs:
<ul class="nav">
<li><a href class="nav-link">Link</a></li>
<li><a href class="nav-link">Link</a></li>
<li class="ml-auto"><a href class="nav-link">Right</a></li>
</ul>
Breadcrumbs:
<ul class="breadcrumb">
<li><a href="/">Home</a></li>
<li class="active"><a href="/">Link</a></li>
<li class="ml-auto"><a href="/">Right</a></li>
</ul>
https://www.codeply.com/go/6ITgrV7pvL
Grid:
<div class="row">
<div class="col-3">Left</div>
<div class="col-3 ml-auto">Right</div>
</div>
Changed to float-right float-left float-xx-left and float-xx-right
Back in 2016 when this question was originally asked, the answer was:
$('.pull-right').addClass('pull-xs-right').removeClass('pull-right')
But now the accepted answer should be Robert Went's.
If you want to use those with columns in another work with col-* classes, you can use order-* classes.
You can control the order of your columns with order classes. see more in Bootstrap 4 documentation
A simple from bootstrap docs:
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
Update 2021, Bootstrap 5
In bootstrap 5 these classes have been renamed to .float-end and .float-start.
Docs: https://getbootstrap.com/docs/5.0/utilities/float/
Example:
<div class="row">
<div class="col-12">
<button class="btn btn-primary float-end">Login</div>
</div>
</div>
Thay are removed.
Use float-left instead of pull-left.
And float-right instead of pull-right.
Check bootstrap Documentation here:
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.
Nothing else was working for me. This one did. This might help someone.
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>
Wrapping everything in clearfix div is the key.
I was able to do this with the following classes in my project
d-flex justify-content-end
<div class="col-lg-6 d-flex justify-content-end">
bootstrap-4 add class float-left or right for floating
Order in bootstrap 5 (2021) has been replaced with order-X
<div class="row">
<div class="col">
Child 1
</div>
<div class="col">
Child 2
</div>
<div class="col">
Child 3
</div>
</div>
Natural vs. Visual Order Notice that the natural order of the columns is:
|---1---|---2---|---3---|
Using the flex ordering CSS classes we can change the visual order of the columns...
<div class="row">
<div class="col order-2"> Child 1 </div>
<div class="col order-1"> Child 2 </div>
<div class="col order-3"> Child 3 </div>
</div>
<!-- Or the belo style if you are using responsive utility
<div class="row">
<div class="col border order-lg-3"> Child Responsive 1 </div>
<div class="col border order-lg-2"> Child Responsive 2 </div>
<div class="col border order-lg-1"> Child Responsive 3 </div>
</div>
|---2---|---1---|---3---|
I'm no Bootstrap expert so there may be a better way to do this, but after trying most of the answers here and failing to get any of those solutions to work in my case, I did the following:
<div class="row">
<p class="small-text col-lg-4 text-lg-start text-center">© 2021 MyCompany</p>
<p class="small-text col-lg-4 text-lg-center text-center">All trademarks used on this site are the property of their respective owners.</p>
<p class="small-text col-lg-4 text-lg-end text-center">Terms & Conditions | Privacy Policy</p>
</div>
For all viewports smaller than large this will collapse each one to its own row and centre-align the text.
For all large viewports and higher it will distribute each one equally on a single row and align the text accordingly.
For anyone else and just an addition to Robert, If your nav has flex display value, you can float the element that you need to the right, by adding this to its css
{
margin-left: auto;
}
