docs:styling:float

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

Table of Contents