Float an element in ComboStrap

Undraw My Documents

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




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Undraw My Documents
ComboStrap Styling - Align Attribute

align is an styling attribute of the HTML superset component It permits to align: the content of a component the component itself its children grid The align attribute values may applies: ...
Undraw My Documents
ComboStrap UI - Styling

Styling in ComboStrap is the possibility to render every component as you wish. ComboStrap has three levels of styling: the bootstrap stylesheet level - bootstrap standard theme the user stylesheet...
Stock Image Surfer In The See
How to use the image tag in ComboStrap

Combostrap supports raster and vector images. This page shows you how to add an image with syntax and examples.
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion



Task Runner