Bootstrap Float

The Float utility ensures the responsiveness of the content for the web-applications.

You can toggle floats on your web-page element making them more adaptable to the screen width for different devices.

Bootstrap offers responsive float classes at your service for a better responsive web page design.

Basically, float utility classes provided by Bootstrap are based on the CSS floats property.

They can float the element to the left or to the right or even disable the floating.

So, before we move on to the Bootstrap features of float, let’s have a quick recap of CSS float property.

CSS Float Property

In CSS the float property is there for the layout on the web-pages.

This property can be real useful when you want to wrap any text around images.

The float property for the <img> can be set for one side and the rest of the content will be positioned accordingly.

The permissible values for this property are as follows:

  • left – The float element will float to the left of the container
  • right– The float element will float to the right of the container
  • none – No float value specified. The element will be displayed as per its position in the text. The default value for the property is set to none
  • inherit – Inherit the float value from the parent element

The code below will show the float property applied on an image:

Now, that we understand the basic working of float, let’s get back to Bootstrap and see what it has to offer.

Bootstrap Float Classes

Based on the permissible values of the CSS float property, we have three basic Bootstrap classes:

  • float-left
  • float-right
  • float-none

The working of this classes is similar to the what we read about the respective values. The code below give an example of each for better understanding:

Apart from this, there are other utitlity classes as well, that we’ll discuss in this chapter.

Bootstrap Mixins

You can also toggle the floats using the Sass mixins. See the code below:

Bootstrap Responsive classes

There are also available, responsive classes for the different float values. Check the code below: