---json
{
    "description": "Float permits to print text along the side of a component",
    "page_id": "jjag0jfgf1tzrcz84hwls",
    "title": "Float an element in ComboStrap"
}
---
====== ComboStrap Styling - Float ======


===== About =====
''float'' is a [[styling|styling attribute]] that allows content along the side of the ''floated'' component whereas an [[align|aligned component]] does not.



===== Syntax =====

<code dw>
<component float="value">
</code>
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|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'' | - |
| [[#floatDefaultBreakpoint|default breakpoint]] | ''start'' | ''end'' | ''none'' | - |


<note>
  * 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 [[docs:styling:spacing|spacing]], we set automatically a margin at the ''start'' (''left'' in English) to give space between the component and the text.
</note>
===== Example =====

==== Right for RTL language (English) ====
A value of ''end'' will:
  * float the element from the [[#floatDefaultBreakpoint|default breakpoint]]
  * not float the element on the extra small device because of the ''xs'' device

Example with a [[docs:block:blockquote|blockquote]]

<webcode name="Default" frameborder="0">
<code dw>

<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.
</code>
</webcode>

===== Configuration =====
==== floatDefaultBreakpoint ====

The [[docs:app:configuration|configuration]] ''floatDefaultBreakpoint'' defines the screen size that will be used for the floated value: ''left'', ''right'' and ''none''

The installation value is [[breakpoint|sm (small) - ≥576px]]