This is the Vuetify 3 documentation, examples and information may be broken or outdated.

Float

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

Overview

Float utility classes apply floating based upon the current viewport size using the CSS float property.

Classes

Easily toggle a float with a class:

float/classes.vue

Responsive

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

float/responsive.vue

Here is a list of all the available support classes:

  • .float-left
  • .float-right
  • .float-start
  • .float-end
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-start
  • .float-sm-end
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-start
  • .float-md-end
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-start
  • .float-lg-end
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-start
  • .float-xl-end
  • .float-xl-none

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.