title: How to make a custom variant for BootstrapVue progress bar?
body: <p>I want to make a custom variant for a BootstrapVue progress bar.</p>
  
  <p>I read <a href="https://bootstrap-vue.js.org/docs/reference/variants/" rel="nofollow noreferrer">here</a>:</p>
  
  <blockquote>
    <p>When creating custom variants, follow the Bootstrap V4 varian CSS
    class naming scheme and they will become available to the various
    components that use that scheme (i.e. create a custom CSS class
    btn-purple and purple becomes a vailid variant to use on ).</p>
  </blockquote>
  
  <p>Yes this does not work:</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;b-progress-bar :value="counter*(1.5/10)" variant="purple"&gt;&lt;/b-progress-bar&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>.b-progress-purple {
        background-color: purple !important;
        color: red !important;
  }
  </code></pre>
  
  <p>As one can see here: <a href="http://jsfiddle.net/edwardtanguay/m8gor3no" rel="nofollow noreferrer">http://jsfiddle.net/edwardtanguay/m8gor3no</a></p>
  
  <p><strong>How can I create a custom variant for a BootstrapVue progress bar?</strong></p>