Bootstrap 4 and Tabs

Frameworks Bootstrap
1

General question as I know this worked in Bootstrap 3, and seems to be broken or not implemented in Bootstrap 4. So the question is trhere a work around to have one set of nav controlling multiple tab panels. As I am wanting to do a break in the tab panels for a jumbotron and pick back up. However I want it all controlled by one set of nav.

Here is a jsfiddle example for Bootstrap 3 jsFiddle

I found the jsFiddle link here Stack Overflow

2

This is just a matter of where you put your content divs. When you say you want to do a “break” for a jumbotron, do you mean you want the jumbotron to be in between the tabs and the rest of the content, and stay persistent no matter which tab is selected?

3

Basically it would go

 <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#home" data-target="#home, #home_else" data-toggle="tab">C1</a></li>
        <li><a href="#profile" data-target="#profile, #profile_else" data-toggle="tab">C2</a></li>
    </ul>

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Content 2.</p>
    </div>
</div>
<div class="jumbotron">
</div>
<hr>

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home_else">
        <p>Content 111.</p>
    </div>
    <div class="tab-pane fade" id="profile_else">
        <p>Content 2222.</p>
    </div>

and so on, after the final break the content will load more of said panel via ajax script. However, I need the panels to all be controlled by one set of nav controls.

4

Just to be clear the jsfiddle i linked works with bootstrap 3, and would work for what I want. However, that would require me completely redoing all the work I have done so i am trying to find a work around for bootstrap 4.