What happened to the .pull-left and .pull-right classes in Bootstrap 4?
Bootstrap 4Bootstrap 4 Problem Overview
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?
Bootstrap 4 Solutions
Solution 1 - Bootstrap 4
Bootstrap 4
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;
}
Bootstrap 5
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.1/utilities/float/
Solution 2 - Bootstrap 4
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..).
Examples
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>
Solution 3 - Bootstrap 4
Changed to float-right
float-left
float-xx-left
and float-xx-right
Solution 4 - Bootstrap 4
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.
Solution 5 - Bootstrap 4
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>
Solution 6 - Bootstrap 4
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.
Solution 7 - Bootstrap 4
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.
Solution 8 - Bootstrap 4
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>
Solution 9 - Bootstrap 4
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">
Solution 10 - Bootstrap 4
bootstrap-4 add class float-left or right for floating
Solution 11 - Bootstrap 4
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---|
Solution 12 - Bootstrap 4
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.
Solution 13 - Bootstrap 4
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;
}