Bootstrap tabs transparent underline

Question

I'm trying to make the underline from the active / hovered tab transparent. But I didn't get it working. Anyone knows how to do this?

Screenshot: https://i.stack.imgur.com/uRXJz.png I want the red marked white line removed. Setting blue border bottom color isn't the correct solution because I need it transparent/removed.

JSFiddle: http://jsfiddle.net/mULUv/6/

    border-color: #fff #fff transparent;

I guess I need something to do here. But still don't get it working like I want.

score 2 · Accepted Answer · answered Aug 13 '13 at 07:52

Since you can only cover up borders in css, and since you do not want to set a blue color to overlap one of your borders, the only remaining (and quite tricky) way of achieving the effect you are looking for is to "build" the borders block by block.

The idea is to remove the bottom border from the ul container bar and add fillers between the tabs and after them that would have a bottom border. Then, the tabs which are not hovered nor active will have a bottom border displayed closing the gaps between fillers. Hovering or activating will cause the tab to lose the bottom border and to gain a right, left and top border. Using a custom css class such as your .tab-advanced this can be done safely without overwriting the built-in BootStrap classes.

Here is a working demo.

The html code to add the fillers changes the list to:

<ul class="nav nav-tabs tabs-advanced">
    <li class="active"><a href="#1" data-toggle="tab">1</a></li>
    <li class="in-between-filler"></li>
    <li><a href="#2" data-toggle="tab">2</a></li>
    <li class="in-between-filler"></li>
    <li><a href="#3" data-toggle="tab">3</a></li>
    <li class="filler"></li>
</ul>

and the corresponding additional css is:

.tabs-advanced {
    display: table;
    border: none;
}

.tabs-advanced > li{
    display: table-cell;
    float: none;
}

.tabs-advanced > li > a{
    margin-right: 0;
    border-bottom-style: none;
}

.tabs-advanced > li:not(.active):not(:hover) {
    border-bottom: 1px solid #ddd;
}

.tabs-advanced > li.filler{
    width: 100%;
    border-bottom: 1px solid #ddd;
}

.tabs-advanced > li.in-between-filler{
    min-width: 2px;
    border-bottom: 1px solid #ddd;
}

Thank you. Worked very well for me! – Dev0r Aug 14 '13 at 18:54 — Dev0r, Aug 14 '13 at 18:54

score 0 · Answer 2 · answered Aug 11 '13 at 16:55

0

You could either do...

border: none;

or

border: 1px solid transparent;

(if you want a 1px line there still)

answered Aug 11 '13 at 16:55

james

5,006
8
39
64

In what way does it not work? Could you possibly elaborate? Do you want a 0px border? Or a 1px border that can't be seen? – james Aug 11 '13 at 18:08
I want to bottom border completly removed/transparent like so: http://i.imgur.com/qw6syrU.png This line needs to be removed/transparent (red marked line): http://img9.imageshack.us/img9/5589/jejb.png – Dev0r Aug 11 '13 at 18:43
Alright, that makes sense now. Try this resource, it may be of some help...(http://stackoverflow.com/questions/12518642/how-do-i-remove-a-section-of-the-border-on-a-div-to-make-left-nav-look-seamless) – james Aug 11 '13 at 18:54

Bootstrap tabs transparent underline

2 Answers2

Linked