Davidthecoolsmartguy Davidthecoolsmartguy - 2 months ago 28
CSS Question

Bootstrap Lined pills style css

I am trying to get Nav Pills that look like this.

bootsnipp.com

When i hover to highlight underneath as well. I cant seem to get it to work.

Answer

Here is the only styles you need but instead of toggle you just do hrefs

<style type="text/css">
    .tabbable-line>.nav-tabs>li {
    margin-right: 2px
}

.tabbable-line>.nav-tabs>li>a {
    border: 0;
    margin-right: 0;
    color: #737373
}

.tabbable-line>.nav-tabs>li:hover {
    border-bottom: 4px solid #fbcdcf
}

.tabbable-line>.nav-tabs>li:hover>a {
    border: 0;
    background: 0 0!important;
    color: #333
}

.tabbable-line>.nav-tabs>li.active {
    border-bottom: 4px solid #f3565d;
    position: relative
}

.tabbable-line>.nav-tabs>li.active>a {
    border: 0;
    color: #333
}
</style>

                <div class="tabbable-line">
                    <ul class="nav nav-tabs ">
                        <li class="active">
                            <a href="#tab_default_1" data-toggle="tab">
                            Tab 1 </a>
                        </li>
                        <li>
                            <a href="#tab_default_2" data-toggle="tab">
                            Tab 2 </a>
                        </li>
                        <li>
                            <a href="#tab_default_3" data-toggle="tab">
                            Tab 3 </a>
                        </li>
                    </ul>
                </div>
Comments