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
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <head> <style> img { float: right; } </style> </head> <body> <p>This is example to show the use of the CSS float property. The image will automatically float to the right of containing element. The rest of the paragraph will be wrapped around it accordingly.</p> <p><img src="imageExamp1.jpg" alt="Example1" style="width:170px;height:170px;margin-left:15px;"> This is just s sample paragraph to show the use of the float property in CSS. This is the second line for the paragraph. Here, comes the third line of the pararaph</p> </body> |
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:
1 2 3 | <div class="float-left">Float left on all viewport sizes</div><br> <div class="float-right">Float right on all viewport sizes</div><br> <div class="float-none">Don't float on all viewport sizes</div> |
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:
1 2 3 4 5 6 7 8 9 10 11 | .element { @include float-left; } .another-element { @include float-right; } .one-more { @include float-none; } |
Bootstrap Responsive classes
There are also available, responsive classes for the different float values. Check the code below:
1 2 3 4 | <div class="float-sm-left">Float left for SM (small) screens or wider</div><br> <div class="float-md-left"> Float left for MD (medium) screens or wider </div><br> <div class="float-lg-left"> Float left for LG (large) screens or wider </div><br> <div class="float-xl-left"> Float left for XL (xtra-large) screens or wider </div><br> |