What happened to the .pull-left and .pull-right classes in Bootstrap 4?
Solution 1:
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:
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:
Changed to float-right
float-left
float-xx-left
and float-xx-right