How to v-bind conditional styles with Vuejs depending on a bootstrap breakpoint?

Question

I'm trying to assign a dynamic style for a different bootstrap breakpoints. To change the position, etc. if the display is different width. So I'm applying v-bind style directive with vue. Am I doing it properly?

While the console gives an error - Whitespace was expected.

<div class="footer" :style="{$bootstrap.breakpoint.md ? "white" : "black"}">
</div>

<script>
   white: {
        background:
          'white',
      },
  black: {
        background:
          'black',
      },
</script>

It's not necessary to use the bootstrap brakepoints, though, can it be done with media queries?

Answer 1

You should use single quotes on ‘white’ and ‘black’ on the statement, if not, javascript thinks you are closing the opening “, hence causing a syntax error

 :style="{$bootstrap.breakpoint.md ? 'white' : 'black'}"