Help Classes
Help classes allows the user to quickly float an element to left or right. You can also disable the float based on the screen sizes.
For example: - .floatLeft-md float the element to the left on viewport size medium and larger.
- If user wants to clear the float the clearfix class can be used.
- The float has the following 3 properties.
1. Float Left
2. Float Right
3. Float None
floatNone is the default behavior, .floatLeft and floatRight makes the element floated to left and right respectively.
.clearfloat prevents the floated element from overflowing out of the container.
- .clearIt clears the float from the element on which the class is specified.
-The most common way to use the clearIt class is after you have used a float property on an element
.floatLeft - Floats elements to the left.
.floatRight - Floats elements to the right.
.floatLeft-sm - Floats elements to the left on viewport size small (570px).
.floatLeft-md - Floats elements to the left on viewport size medium (768px).
.floatLeft-lg - Floats elements to the left on viewport size large (960px).
.floatLeft-xl - Floats elements to the left on viewport size Extra large (960px).
.floatRight-sm - Floats elements to the right on viewport size small.
.floatRight-md - Floats elements to the right on viewport size medium.
.floatRight-lg - Floats elements to the right on viewport size large.
.floatRight-lg - Floats elements to the right on viewport size extra large.
.floatNone - Removes the float.
No print class:
.noPrint Class prevents element that the class is attached to from being sent to the printer.
Margin
Add .mt class for margin-top,
.mr for margin-right ,
.mb for margin-bottom,
.ml for margin-left.
All classes adds .5em/8px margin.