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