Float
Controls the content wrapping around an element.
Utility | Properties |
---|---|
fl-ie | float: inline-end; |
fl-is | float: inline-start; |
fl-l | float: left; |
fl-none | float: none; |
fl-r | float: right; |
Inline End
This example sets the float property to inline-end. The element will float to the end of the inline direction, which is typically the right side in left-to-right languages.
<div class="h-14 p-r stripes tc-white"> <div class="ai-c bg-indigo d-f d-14 fl-ie jc-c rad-1">A</div></div>
Inline Start
This example sets the float property to inline-start. The element will float to the start of the inline direction, which is typically the left side in left-to-right languages.
<div class="h-14 p-r stripes tc-white"> <div class="ai-c bg-indigo d-f d-14 fl-is jc-c rad-1">A</div></div>
Left
This example sets the float property to left. The element will float to the left side of its container, allowing text and inline elements to wrap around it.
<div class="h-14 p-r stripes tc-white"> <div class="ai-c bg-indigo d-f d-14 fl-l jc-c rad-1">A</div></div>
None
This example sets the float property to none. The element will not float, and it will be displayed in the normal flow of the document.
<div class="h-14 p-r stripes tc-white"> <div class="ai-c bg-indigo d-f d-14 fl-none jc-c rad-1">A</div></div>
Right
This example sets the float property to right. The element will float to the right side of its container, allowing text and inline elements to wrap around it.
<div class="h-14 p-r stripes tc-white"> <div class="ai-c bg-indigo d-f d-14 fl-r jc-c rad-1">A</div></div>
Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
You can combine responsive breakpoints like sm:fl-*
,md:fl-*
, lg:fl-*
, and xxl:fl-*
allows targeting specific utilities in different viewports.
<div class="fl-l md:fl-r ..."></div>
Alternatively, you can apply :hover
by using h:fl-*
utility to override elements and change their values when hovering over them.
<div class="fl-l h:fl-r ..."></div>