---
meta:
  title: Float
  description: Float helper classes allow you to control the float property of an element based upon the viewport size.
  keywords: float helper classes, float classes, vuetify float
related:
  - /styles/text-and-typography/
  - /styles/transitions/
  - /styles/content/
features:
  report: true
---

# Float

Applies a custom float across any breakpoint with responsive float utilities.

<PageFeatures />

| Class | Properties |
| - | - |
| **float-left** | float: left; |
| **float-right** | float: right; |
| **float-start** | float: start; |
| **float-end** | float: end; |
| **float-none** | float: none; |
| **float-sm-left** |  float: left; |
| **float-sm-right** |  float: right; |
| **float-sm-start** |  float: start; |
| **float-sm-end** |  float: end; |
| **float-sm-none** |  float: none; |
| **float-md-left** |  float: left; |
| **float-md-right** |  float: right; |
| **float-md-start** |  float: start; |
| **float-md-end** |  float: end; |
| **float-md-none** |  float: none; |
| **float-lg-left** |  float: left; |
| **float-lg-right** |  float: right; |
| **float-lg-start** |  float: start; |
| **float-lg-end** |  float: end; |
| **float-lg-none** |  float: none; |
| **float-xl-left** |  float: left; |
| **float-xl-right** |  float: right; |
| **float-xl-start** |  float: start; |
| **float-xl-end** |  float: end; |
| **float-xl-none** |  float: none; { style="max-height: 420px;" fixed-header } |

<PromotedEntry />

<FeaturesBreakpointsTable />

## Usage

Float utility classes apply floating based upon the current viewport size using the [CSS float property](https://developer.mozilla.org/en-US/docs/Web/CSS/float).

## Classes

Easily toggle a float with a class:

<ExamplesExample file="float/classes" />

## Responsive

Floats can also be applied on a per breakpoint (viewport) basis.

<ExamplesExample file="float/responsive" />
