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.2/utilities/float/