Floating
Toggle float on elements with responsive float utilities.
Contents
Overview
These utility classes float an element to the enable or disable floating, based on the current viewport size using the CSS float
property.
Usage
Note that the float utilities do not have any affect on items inside flex container. Please refer to the flexbox specification for details.
Instead of using left/right
designators, the float utilities use start/end
designators to match up with the flexbox utilities.
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.
Name | Type | Default | Description |
---|---|---|---|
$enable-utility-float |
boolean | true |
Enable the generation of the float utility classes. |
Mixins
Here are the mixins related to this grouping of utility classes that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.
float-start
Apply a float to the ‘start’ side.
float-end
Apply a float to the ‘end’ side.
float-none
Disable float.