# Bootstrap 4 and Tabs

**URL:** https://forum.pinegrow.com/t/bootstrap-4-and-tabs/2196
**Category:** Bootstrap
**Created:** [September 13, 2018, 3:16pm UTC](https://forum.pinegrow.com/t/bootstrap-4-and-tabs/2196 "2018-09-13T15:16:11Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![rane\_mstsage](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rane_mstsage/32/1328_2.png) [@rane\_mstsage](https://forum.pinegrow.com/u/rane_mstsage)
#### Post date: [September 13, 2018, 3:16pm UTC](https://forum.pinegrow.com/t/bootstrap-4-and-tabs/2196/1 "2018-09-13T15:16:11Z")

</div>

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](http://jsfiddle.net/ju9sV/6/)

I found the jsFiddle link here [Stack Overflow](https://stackoverflow.com/questions/19719653/control-multiple-tab-contents-with-one-nav-tabs)

---

<div class="post-metadata">

### Author: ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)
#### Post date: [September 13, 2018, 10:59pm UTC](https://forum.pinegrow.com/t/bootstrap-4-and-tabs/2196/2 "2018-09-13T22:59:25Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![rane\_mstsage](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rane_mstsage/32/1328_2.png) [@rane\_mstsage](https://forum.pinegrow.com/u/rane_mstsage)
#### Post date: [September 14, 2018, 5:48am UTC](https://forum.pinegrow.com/t/bootstrap-4-and-tabs/2196/3 "2018-09-14T05:48:07Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![rane\_mstsage](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rane_mstsage/32/1328_2.png) [@rane\_mstsage](https://forum.pinegrow.com/u/rane_mstsage)
#### Post date: [September 14, 2018, 5:49am UTC](https://forum.pinegrow.com/t/bootstrap-4-and-tabs/2196/4 "2018-09-14T05:49:20Z")

</div>

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.