Apply CSS class only for certain screen widths in a Vuetify app

user_4786956 0
Viewed 229

Vuetify provides various CSS helper classes that allow you to show/hide an element based on the screen size breakpoints it defines, e.g.

<div class="d-lg-none">
  hide on screens wider than large (lg)
</div>

But is there a way to selectively apply a class at a certain breakpoint, e.g. if I want to use the class text-right on large screens and above and the class text-left on all others, is there a way to do this?

I realise I could write my own media queries, but I'm reluctant to do this as it would require me to duplicate the Vuetify breakpoints.

vuejs2 vuetify.js css
1 Answers

Take a look at the Breakpoint service

You can use it to programmatically set the class. For example:

  <div :class="$vuetify.breakpoint.lgAndUp?'text-left':'text-right'">
     Text align by breakpoint
  </div>

https://codeply.com/p/OeODqdpdrm

Also note: the there are responsive text-align classes, for example:

    <div class="text-left text-lg-right">
        Text responsive align
    </div>
user_1714560
Related