CODEWITHSUNDEEP
twitter-bootstraphtml-listsfrontend
Sergey Aganezov jr
Sergey Aganezov jr

Reputation: 675

twitter bootstrap nav stacked list customization

Hi frontend developers and everyone else, who's interested in the subject. I have a question about one of bootstrap component, namely ul list customization with nav nav-tabs nav-stacked classes.

Classic variant is this

<ul class="nav nav-tabs nav-stacked">
    <li><a href="lala">lala</a></li>
    <li><a href="baba">baba</a></li>
</ul>

which looks like this:

enter image description here

but what if I want to add some sort of link / button to the right of every stacked tab in it? If I omit a tag in li tag, the cool border, who-tab-hover effects are gone. SO is there any way of doing this, so I can continue using bootstrap chain of classes nav nav-tabs nav-stacked and to be capable of placing second url on the tab (in a way, whole tab is still linked to the specified href, but right-placed staff, such as a with class btn?

I've tried this code:

<ul class="nav nav-tabs nav-stacked">
    <li>
        <ul class="inline">
            <li><a href="lala">lala</a></li>
            <li class="pull-right"><a href="baba" class="btn btn-info">bbb</a></li>
        </ul>
    </li>
    <li><a href="baba">baba</a></li>
</ul>

it didn't work, I mean, yes, I did have a hyperlink, and I did have a button, pulled to the right, but I didn't have a border around it and all active zone in it.

If something unclear -- I'll make it clearer. Sincerely, Sergey

Upvotes: 1

Views: 389

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362610

The tabs are created using the anchor, so you could put your right aligned button in the anchor tag:

<ul class="nav nav-tabs nav-stacked">
    <li><a href="lala">lala <button class="pull-right">bbb</button></a></li>
    <li><a href="baba">baba</a></li>
</ul>

Demo - http://bootply.com/60855

Upvotes: 1

Related Questions