title: Change text colour with bootstrap-vue navbar item-dropdown
body: <p>I am using <code>Bootstrap-Vue</code> to write a web page, but I have trouble changing the text colors on the <code>Bootstrap navbar</code>, especially the <code>b-nav-item-dropdown</code> tag. I have tried using <code>&lt;span class="text-dark"</code> to wrap around the <code>b-nav-item-dropdown</code> tag but that did not work. It appeared that the variant of the <code>b-navbar</code> can only set the text color variants to either dark or light.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div&gt;
    &lt;b-navbar toggleable="md" type="dark" variant="primary"&gt;
    &lt;b-navbar-toggle target="nav_collapse"&gt;&lt;/b-navbar-toggle&gt;
    &lt;b-collapse is-nav id="nav_collapse"&gt;
      &lt;b-navbar-nav class="pl-5" inline&gt;
  
        &lt;b-nav-item-dropdown text="Electronics"&gt;
          &lt;b-dropdown-item href="/"&gt;Item 1&lt;/b-dropdown-item&gt;
          &lt;b-dropdown-item href="/"&gt;Item 2&lt;/b-dropdown-item&gt;
          &lt;b-dropdown-item href="/"&gt;Item 3&lt;/b-dropdown-item&gt;
          &lt;b-dropdown-item href="/"&gt;Item 4&lt;/b-dropdown-item&gt;
        &lt;/b-nav-item-dropdown&gt;
  
  
        &lt;b-nav-item-dropdown text="Sports"&gt;
          &lt;b-dropdown-item href="/"&gt;Item 1&lt;/b-dropdown-item&gt;
          &lt;b-dropdown-item href="/"&gt;Item 2&lt;/b-dropdown-item&gt;
          &lt;b-dropdown-item href="/"&gt;Item 3&lt;/b-dropdown-item&gt;
          &lt;b-dropdown-item href="/"&gt;Item 4&lt;/b-dropdown-item&gt;
        &lt;/b-nav-item-dropdown&gt;
  
      &lt;/b-navbar-nav&gt;
      &lt;!--Login button--&gt;
      &lt;b-navbar-nav class="ml-auto pr-5"&gt;
        &lt;b-button size="me"&gt;Login&lt;/b-button&gt;
      &lt;/b-navbar-nav&gt;
  
    &lt;/b-collapse&gt;
  &lt;/b-navbar&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My goal is to get all the text in <code>b-nav-item-dropdown</code> to change to black instead of the grey-ash color.</p>