CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
lgm42
lgm42

Reputation: 621

Add button to bootstrap navpills

I'm using Bootstrap 3.3 and I'm using nav pills to manage pages of my application When I'm in customization mode, I can make some action on a page like rename or delete. In order to do that I show some button at the end of the pill to provide functionnality.

I would like something like that :

nav pill hover

and without hover

nav pill without hover

But I can't manage to make a good integration of my button in my pill.

Here is the html code of one pill

<ul class="nav nav-pills nav-justified page-tabs">
    <li class="tabPagePills">
        <a href="#Page1" data-toggle="tab">
            <span>Page1</span>
            <div class="pageCustomizationToolbar customization-item pull-right hidden">
                <a href="#" class="active" id="trash"> 
                    <i class="glyphicon glyphicon-trash"></i>
                </a>
                <a href="#" class="active" id="rename"> 
                    <i class="glyphicon glyphicon-pencil"></i>
                </a>
            </div>
        </a>
    </li>
</ul>

And my css code

.pageCustomizationToolbar {
   position: absolute;
   right: 0px;
   top: 0px;
   margin-top: 2px;
   margin-right: 2px;
}

I have make a fiddle to let you play here : https://jsfiddle.net/Lmyoj9av/1/

The first thing I would like to do is to make that buttons follow the same color font scheme that text pill because today my button color doesn't change and when the pill is active buttons are invisible.

The second thing is to make my links vertically centered.

And the last things is to see if there is a less ugly solution than put my in absolute in the pill.

Any help will be very appreciated.

Thanks

Upvotes: 0

Views: 1676

Answers (1)

jdt
jdt

Reputation: 336

Try the following:

<ul class="nav nav-pills nav-justified page-tabs">
<li class="">
    <a href="#">
        Page1
        <i class="glyphicon glyphicon-trash pull-right" style="cursor: pointer" onclick="alert('del');"></i>

        <i class="glyphicon glyphicon-pencil pull-right" style="cursor: pointer" onclick="alert('edt');"></i>
    </a>
</li>

Upvotes: 1

Related Questions