CODEWITHSUNDEEP
javascriptcssvue.jsvuejs2bootstrap-vue
shaun
shaun

Reputation: 1273

Bootstrap-vue issue with b-nav-item, can't change color

If I put this code into the Template portion of the playground at https://bootstrap-vue.js.org/play, I cannot get my 'A Number Here (1)' text to be red. Is there any way to color the text of one b-nav-item so it isn't the same as the others?

<b-navbar toggleable="md" type="dark" variant="dark">
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
    <b-collapse is-nav id="nav_collapse">
        <b-navbar-nav>
            <b-nav-item href="#">Nav Item 1</b-nav-item>
            <b-nav-item href="#">Nav Item 2</b-nav-item>
            <b-nav-item href="#">Nav Item 3</b-nav-item>
        </b-navbar-nav>
        <b-navbar-nav class="ml-auto">
            <b-nav-item href="#" class="text-danger">A Number Here (1)</b-nav-item>
            <b-nav-item-dropdown text="Nav Item 5" right>
                <b-dropdown-item href="#">Dropdown 1</b-dropdown-item>
                <b-dropdown-item href="#">Dropdown 2</b-dropdown-item>
                 <b-dropdown-item href="#">Dropdown 3</b-dropdown-item>
              <b-dropdown-item href="#">Dropdown 4</b-dropdown-item> 
            </b-nav-item-dropdown>
            <b-nav-item-dropdown text="Nav Item 6" right>
                <b-dropdown-item href="#">Dropdown 1</b-dropdown-item>
            </b-nav-item-dropdown>
        </b-navbar-nav>
    </b-collapse>
</b-navbar>

The resulting HTML created from above is

<li class="nav-item text-danger">
    <a href="#" target="_self" class="nav-link">A Number Here (1)</a>
</li>

and it won't color the <a> tag it adds the class to the <li>.

I need it to result in this HTML

<li class="nav-item">
    <a href="#" target="_self" class="nav-link text-danger">A Number Here (1)</a>
</li>

instead but don't know how to manipulate the bootstrap-vue code to create it this way.

Upvotes: 4

Views: 3019

Answers (2)

mike
mike

Reputation: 41

There is a special prop link-classes So you could add it to your b-nav-item component:

<b-nav-item href="#" link-classes="text-danger">A Number Here (1)</b-nav-item>

Upvotes: 3

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You could wrap your text with span tag with text-danger class as follow :

<b-nav-item href="#"  ><span class="text-danger">A Number Here (1)</span></b-nav-item>

the html result will be like this :

 <li class="nav-item"><a href="#" target="_self" class="nav-link"><span style="" class="text-danger">A Number Here (1)</span></a></li>

Upvotes: 3

Related Questions