Table of Contents

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