Floating

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...