About
float is a styling attribute that allows content along the side of the floated component whereas an aligned component does not.
Syntax
<component float="value">
where value is a composition of one of the below floated value separated by a space.
A value of:
- start means on the left for a RTL language or on the right for LTR language
- end means on the right for a RTL language or on the left for LTR language
| Breakpoint / Position | Start | End | None | Default |
|---|---|---|---|---|
| xs | xs-start | xs-end | xs-none | xs-none |
| sm | sm-start | sm-end | sm-none | - |
| md | md-start | md-end | md-none | - |
| lg | lg-start | lg-end | lg-none | - |
| xl | xl-start | xl-end | xl-none | - |
| default breakpoint | start | end | none | - |
- The value of left and right can also be used and are translated by start and end
- When a component is floated on the end (right in English) without spacing, we set automatically a margin at the start (left in English) to give space between the component and the text.
Example
Right for RTL language (English)
A value of end will:
- float the element from the default breakpoint
- not float the element on the extra small device because of the xs device
Example with a blockquote
<blockquote float="end">
The true work does not reveal itself until you get into.
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo erat, aliquam eu felis nec, sodales pretium mi. In dictum, dui non tincidunt finibus, nibh quam condimentum tortor, at scelerisque ex sem non quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur fermentum justo id ligula ultrices tincidunt tristique eu quam. Vestibulum porttitor quam at dui dictum luctus. Fusce ut risus a magna pretium aliquam non a arcu. Morbi eu cursus lacus.
The true work does not reveal itself until you get into.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo erat, aliquam eu felis nec, sodales pretium mi. In dictum, dui non tincidunt finibus, nibh quam condimentum tortor, at scelerisque ex sem non quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur fermentum justo id ligula ultrices tincidunt tristique eu quam. Vestibulum porttitor quam at dui dictum luctus. Fusce ut risus a magna pretium aliquam non a arcu. Morbi eu cursus lacus.
Configuration
floatDefaultBreakpoint
The configuration floatDefaultBreakpoint defines the screen size that will be used for the floated value: left, right and none
The installation value is sm (small) - ≥576px