You are currently viewing the documentation for Vuetify 3
Go to Vuetify 2


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


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

Material Design Breakpoints
Extra smallxsSmall to large phone< 600px
SmallsmSmall to medium tablet600px > < 960px
MediummdLarge tablet to laptop960px > < 1264px*
LargelgDesktop1264px > < 1904px*
Extra largexl4k and ultra-wide> 1904px*
* -16px on desktop for browser scrollbar


Easily toggle a float with a class:


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

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.
Edit this page onGitHub