border on bootstrap tabs content

Question

I want to add a border to my tab content. There should be no border at the bottom of the selected tab. I found this questions: how to give a border to bootstrap tab contents, but the answers didn't work for me?

HTML:

<ul class="nav nav-tabs pull-right">
    <li><a data-toggle="tab" href="#sub_cats_8">תתי קטגוריות</a></li>
    <li class="active"><a data-toggle="tab" href="#category_8">קטגוריה</a></li>
</ul>
<div class="clearfix"></div>
<div class="tab-content" style="height: 100%;">
    <div id="category_8" class="tab-pane fade in active category" style="background-image: url('example.jpg');">
        <h1> קוסמטיקה </h1>
    </div>
    <div id="sub_cats_8" class="tab-pane fade">
        <ul class="sub_categories">
            <li><a href="products.php?act=scat&id=11">איפור</a></li>
        </ul>
    </div>
 </div>

CSS:

body, html {
    direction: rtl;
    height: 100%;
    font-family: Tahoma;
}
.nav-tabs {
    direction: ltr;
}
#logo {
    background-color: #005CB8;
    width: 100%;
    color: white;
    padding: 4% 10%;
    -webkit-box-shadow: 20px 10px 20px #003972;
    -moz-box-shadow: 20px 10px 20px #003972;
    box-shadow: 20px 10px 20px #003972;
    border-bottom-left-radius: 50px;
}
#logo h1, #logo h4 {
    display: inline;
    font-family: head;
}
#logo h1 {
    font-size: 550%;
}
#logo h4 {
    font-size: 220%;
}
.navbar-inverse {
    background-color: #477199;
    font-weight: bold;
}
.nav.navbar-nav.navbar-right li a {
    color: white;
}
.nav.navbar-nav li a {
    color: white;
}
.navbar-inverse .navbar-nav > .active {
    background-color: #003972;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: white;
    background: #003972;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    background-color: #324F6B;
    color: white;
}
.category {
    text-align: center;
    margin-top: 1px;
    background-size: 100% 100%;
    padding: 15% 0;
}
.category h1 {
    color: white;
    font-family: head;
    font-size: 500%;
    text-shadow: 2px -2px black;
}
.category_start {
    margin: 0 auto;
    width: 85%;
}
.sub_categories {
    -webkit-columns: auto 3;
    /* Chrome, Safari, Opera */
    -moz-columns: auto 3;
    /* Firefox */
    columns: auto 3;
    list-style-type: disc;
    margin-top: 5px;
}
.category_start .container {
    margin-top: 10px;
}
.product_image {
    height: 80px;
    width: 80px;
}
.products_sub_list {
    margin: 10px auto 0;
    text-align: center;
    max-width: 80%;
    border-radius: 7px;
}
.products_sub_list td {
    width: 15%;
    max-width: 15%;
    padding: 0 5px;
    border: 3px solid #46617A;
}
.product {
    width: 80%;
    border: 3px solid #46617A;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
}
.product_table td {
    border: 2px solid #46617A;
    padding: 13px;
}
.product_table {
    display: inline-table;
    margin-left: 15px;
    margin-bottom: 8px;
}
.product_table td:first-child {
    font-weight: bold;
}
.page {
    width: 85%;
    margin: 0 auto;
    padding: 15px 25px;
    border: 2px solid #46617A;
    border-radius: 10px;
    background-color: #C8D0D7;
}
.register {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}
.register td {
    padding: 5px;
    text-align: right;
}
.register table {
    margin-right: 240px;
}
#register {
    width: 80%;
    position: absolute;
    z-index: 2;
    display: none;
    left: 0;
    right: 0;
    top: 100px;
    margin: 0 auto;
    border: 3px solid #0066FF;
    background-color: #CCE0FF;
    text-align:center;
    border-radius: 10px;
}
#bbg {
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.tab-content {
    border: 1px solid #ddd;
    padding: 1px;
}

JSFiddle: http://jsfiddle.net/ep2drocb/7/

Notice there is border in the open tab, also the closed tabs have a double border.

Can you post your code (and a JSFiddle if possible) so we can help you troubleshoot your issue. Otherwise, there is no way to know why that answer (in the Stackoverflow link you posted) did not work for you. — technophobia
ok, i edit, i paste the new code, just move the space from the link — Kaki Baleven

technophobia technophobia · Accepted Answer · 2015-05-12T18:46:20

The main problem is the pull-right on the ul element.

Remove pull-right class from the ul
Remove the clear-fix element as it's not needed anymore
Remove top border from your tab-content class
Float the lis right
Correct the margins on the tab anchors

Relevant HTML:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#category_8">תתי קטגוריות</a></li>
    <li><a data-toggle="tab" href="#sub_cats_8">קטגוריה</a></li>
</ul>
<div class="tab-content">
    <div id="category_8" class="tab-pane fade in active category">
        <h1> קוסמטיקה </h1>
    </div>
    <div id="sub_cats_8" class="tab-pane fade">
        <ul class="sub_categories">
            <li><a href="products.php?act=scat&id=11">איפור</a></li>
        </ul>
    </div>
</div>

Relevant CSS:

.tab-content {
    border: 1px solid #ddd;
    border-width: 0 1px 1px; /* Removes the top border */
    padding: 1px;
}
.nav-tabs > li {
    float: right;
}
.nav-tabs > li > a {
    margin-right: 0;
    margin-left: 2px;
}

JSFiddle: http://jsfiddle.net/ep2drocb/9/

That should get you on the right track.

border on bootstrap tabs content

1 Answers