CODEWITHSUNDEEP
htmlcsstwitter-bootstraptabs
Dev0r
Dev0r

Reputation: 299

Bootstrap tabs transparent underline

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.sstatic.net/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.

Upvotes: 3

Views: 6860

Answers (2)

edsioufi
edsioufi

Reputation: 8335

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;
}

Upvotes: 2

james
james

Reputation: 5226

You could either do...

border: none;

or

border: 1px solid transparent;

(if you want a 1px line there still)

Upvotes: 0

Related Questions