To change the value of the float property, Bootstrap provides the float-* and float-** helper classes (the latter being responsive). For example, to float an element to the left, the float-left class should be applied. Similarly, to float an element to the right, or to not float an element at all, the float-right and float-none classes are used respectively. To float an element only to the left on small viewports, float-sm-left is used, whereby sm can be replaced with any desirable viewport size (sm, md, lg, and xl).
As with majority of helper classes discussed in this chapter, float-* classes are simply wrappers for a given property, while their responsive equivalents are defined using breakpoints:
.float-left {
float: left !important;
}
.float-right {
float: right !important;
} .float-none {
float: none !important;
}
@media (min-width: 576px) {
.float-sm-left {
float: left !important;
}
.float-sm-right {
float: right !important;
}
.float-sm-none {
float: none !important;
}
}
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.