Effortlessly align and position elements in your projects using intuitive and customizable floating classes, enhancing the visual layout of your projects.

About

Floating utilities is a class group designed to set the floating values of elements. With its customizable and responsive structure, it aims to fulfill all the features you need in your projects through simple class assignments.

In JTB_MD, the assigned classbase for all floating classes, regardless of their primary purpose, is .jtbFL.

How to use

To assign any element a floating attribute, you can simply add related JTB_MD class into it:

.jtbD-[ left | right | none ]

This element has: .jtbFL-left.

This element has: .jtbFL-right.

This element has: .jtbFL-none.

                            <!-- float: left  -->
<span class='jtbFL-left'>...</span>

Responsiveness

It is also possible to make an element's floating status behave differently based on the screen sizes of clients. To activate this utility, simply add the related screen breaker (defined in Breakpoints seciton) at the end of the corresponding class with a hyphen (-):

Refer to the table below to understand which parts of the utility group can be used with screen breakers:

Part of group	Responsiveness	Example class
All classes	Active	`.jtbFL-left-xxl`