What happened to the .pull-left and .pull-right classes in Bootstrap 4?

Question

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?

Answer 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/