CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
progNewbie
progNewbie

Reputation: 4822

Bootstrap tabbing red underlining not working

I want to create a tablayout in bootstrap that looks like the ones in android.

I am trying to create these tabs like they explain here: https://bootsnipp.com/snippets/featured/bootstrap-line-tabs-by-keenthemes

But I want to use bootstrap 4.0.0. My code is here: https://jsfiddle.net/3y2wgsao/1/

css:

/***
Bootstrap Line Tabs by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: 
Licensed under MIT
***/

/* Tabs panel */
.tabbable-panel {
  border:1px solid #eee;
  padding: 10px;
}

/* Default mode */
.tabbable-line > .nav-tabs {
  border: none;
  margin: 0px;
}
.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 > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
  border-bottom: 4px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
  border: 0;
  background: none !important;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
  border-bottom: 4px solid #f3565d;
  position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
  border: 0;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
  color: #404040;
}
.tabbable-line > .tab-content {
  margin-top: -3px;
  background-color: #fff;
  border: 0;
  border-top: 1px solid #eee;
  padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
  padding-bottom: 0;
}

html:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="tabbable-panel">
                <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 class="tab-content">
                        <div class="tab-pane active" id="tab_default_1">
                            <p>
                                I'm in Tab 1.
                            </p>
                            <p>
                                Duis autem eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
                            </p>
                            <p>
                                <a class="btn btn-success" href="" target="_blank">
                                    Learn more...
                                </a>
                            </p>
                        </div>
                        <div class="tab-pane" id="tab_default_2">
                            <p>
                                Howdy, I'm in Tab 2.
                            </p>
                            <p>
                                Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
                            </p>
                            <p>
                                <a class="btn btn-warning" href="" target="_blank">
                                    Click for more features...
                                </a>
                            </p>
                        </div>
                        <div class="tab-pane" id="tab_default_3">
                            <p>
                                Howdy, I'm in Tab 3.
                            </p>
                            <p>
                                Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
                            </p>
                            <p>
                                <a class="btn btn-info" href="" target="_blank">
                                    Learn more...
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

As you can see, the red line doesn't change to the active link. Does anyone know why this is the case?

Upvotes: 0

Views: 143

Answers (3)

Pushparaj
Pushparaj

Reputation: 1080

make bootstrap.js below the jquery.js. check this fiddle

https://jsfiddle.net/raj_mutant/3y2wgsao/16/

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="tabbable-panel">
                <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 class="tab-content">
                        <div class="tab-pane active" id="tab_default_1">
                            <p>
                                I'm in Tab 1.
                            </p>
                            <p>
                                Duis autem eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
                            </p>
                            <p>
                                <a class="btn btn-success" href="" target="_blank">
                                    Learn more...
                                </a>
                            </p>
                        </div>
                        <div class="tab-pane" id="tab_default_2">
                            <p>
                                Howdy, I'm in Tab 2.
                            </p>
                            <p>
                                Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
                            </p>
                            <p>
                                <a class="btn btn-warning" href="" target="_blank">
                                    Click for more features...
                                </a>
                            </p>
                        </div>
                        <div class="tab-pane" id="tab_default_3">
                            <p>
                                Howdy, I'm in Tab 3.
                            </p>
                            <p>
                                Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
                            </p>
                            <p>
                                <a class="btn btn-info" href="" target="_blank">
                                    Learn more...
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362540

You need to change the CSS selectors now that the active class is applied the anchor instead of the li in Bootstrap 4...

https://www.codeply.com/go/xV3CvpV2yy

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

.tabbable-line > .nav-tabs > li a:not(.active):hover {
  border-bottom: 4px solid #fbcdcf;
}

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

Upvotes: 1

SaurabhLP
SaurabhLP

Reputation: 3657

There are couple of mistakes in the HTML and CSS.

See if my developed fiddle is what you want.

https://jsfiddle.net/3y2wgsao/14/

css:

/* Tabs panel */
.tabbable-panel {
  border:1px solid #eee;
  padding: 10px;
}

/* Default mode */
.tabbable-line > .nav-tabs {
  border: none;
  margin: 0px;
}
.tabbable-line > .nav-tabs > li {
  margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
  border-left:0; border-right:0; border-top:0;
  border-bottom: 4px solid transparent;
  margin-right: 0;
  color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {


}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {

  background: none !important;
  border-bottom-color: #fbcdcf;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;
}
.tabbable-line > .nav-tabs > li > a.active {
  border-bottom-color: #f3565d;
  position: relative; display:block;

  color: #333333;
}
.tabbable-line > .nav-tabs > li > a.active > i {
  color: #404040;
}
.tabbable-line > .tab-content {
  margin-top: -3px;
  background-color: #fff;
  border: 0;
  border-top: 1px solid #eee;
  padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
  padding-bottom: 0;
}

html:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="tabbable-panel">
                <div class="tabbable-line">
                    <ul class="nav nav-tabs " id="nav-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" href="#tab_default_1" data-toggle="tab" role="tab">
                            Tab 1 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tab_default_2" data-toggle="tab" role="tab">
                            Tab 2 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tab_default_3" data-toggle="tab" role="tab">
                            Tab 3 </a>
                        </li>
                    </ul>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="tab_default_1" role="tabpanel">
                            <p>
                                I'm in Tab 1.
                            </p>
                            <p>
                                Duis autem eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
                            </p>
                            <p>
                                <a class="btn btn-success" href="#" target="_blank">
                                    Learn more...
                                </a>
                            </p>
                        </div>
                        <div class="tab-pane fade" id="tab_default_2" role="tabpanel">
                            <p>
                                Howdy, I'm in Tab 2.
                            </p>
                            <p>
                                Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
                            </p>
                            <p>
                                <a class="btn btn-warning" href="#" target="_blank">
                                    Click for more features...
                                </a>
                            </p>
                        </div>
                        <div class="tab-pane fade" id="tab_default_3" role="tabpanel">
                            <p>
                                Howdy, I'm in Tab 3.
                            </p>
                            <p>
                                Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
                            </p>
                            <p>
                                <a class="btn btn-info" href="#" target="_blank">
                                    Learn more...
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Thanks

Upvotes: 1

Related Questions