We Keep Coding

Bootstrap 5 - two navs one tab-content

I have code consisting of three identical blocks, each with at least two nav and one tab-content. The problem is that I can't make it so that when I click on an item to deselect the active item in the other list
I found a similar solution for bootstrap 3, but I can't translate it correctly for bootstrap 5, I'm not good with scripts.
bootstrap multiple nav tabs for tab content
another solution for BS3
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js"></script>
<div class="MyTabPillsOne">
<div class="hr-text hr-text-left m-t-2 m-b-1">
<h6><strong>List 1</strong></h6>
</div>
<div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-1" type="button" role="tab" aria-controls="tab-3" aria-selected="true">1</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-2" type="button" role="tab" aria-controls="tab-3" aria-selected="false">2</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-3" type="button" role="tab" aria-controls="tab-3" aria-selected="false">3</button>
</div>
<div class="hr-text hr-text-left m-t-2 m-b-1">
<h6><strong>List 2</strong></h6>
</div>
<div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<button class="nav-link " data-bs-toggle="pill" data-bs-target="#tab-a" type="button" role="tab" aria-controls="tab-a" aria-selected="false">a</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-b" type="button" role="tab" aria-controls="tab-b" aria-selected="false">b</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-c" type="button" role="tab" aria-controls="tab-c" aria-selected="false">c</button>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab-1">
<h1>1</h1>
</div>
<div class="tab-pane" id="tab-2">
<h1>2</h1>
</div>
<div class="tab-pane" id="tab-3">
<h1>3</h1>
</div>
<div class="tab-pane" id="tab-a">
<h1>A</h1>
</div>
<div class="tab-pane" id="tab-b">
<h1>B</h1>
</div>
<div class="tab-pane" id="tab-c">
<h1>C</h1>
</div>
</div>
</div>

After reading documentation, I wrote this script:
function selectorFlow(selector) {
document
.querySelectorAll(
"." + selector + ' .nav-link[data-bs-toggle="pill"]'
)
.forEach((t, i) => {
t.addEventListener("show.bs.tab", function (e) {
var active = document.querySelector(
"." + selector + " .nav-link.active"
);
active.classList.remove("active");
});
});
}
selectorFlow("MyTabPillsOne");
selectorFlow("MyTabPillsTwo");
selectorFlow("MyTabPillsThree");
The solution is not ideal, but the deadline was tight.

Here is my solution for bootstrap#5.2.3
$('.nav-pills button').click(function() {
var $selector = $('.nav-pills button[data-bs-target="' + $(this).attr("data-bs-target") + '"]').not(this);
var nav = $selector.closest('.nav-pills');
nav.find('button').removeClass("active");
$selector.addClass("active");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">Content 1</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">Content 2</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Content 3</div>
</div>
<br/>
<ul class="nav nav-pills mb-3" id="pills-tab2" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>

Bootstrap 5 Dropdown & Navs: Cannot read property 'children' of null

I get this Dev Console error message "Cannot read property 'children of null" while I'm trying to use a dropdown button with Nav Tabs in Navbar Component.
when I click on the dropdown item to display nav-link in navbar I get this Dev Console error message "Cannot read property 'children of null"
Live Example: https://codepen.io/themes4all/pen/bGWjMzZ
HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu" aria-labelledby="dropdownEx">
<li>
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active" data-bs-toggle="tab" data-bs-target="#nav-example-1" aria-controls="nav-example-1" aria-selected="true">
Example 01
</button>
</li>
<li>
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-example-2" aria-controls="nav-example-2" aria-selected="false">
Example 02
</button>
</li>
</ul>
</div>
</div>
<div class="col">
<div class="tab-content">
<div role="tabpanel" id="nav-example-1" class="tab-pane fade show active" aria-labelledby="nav-example-1-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 01
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"></ul>
</li>
</ul>
</div>
<div role="tabpanel" id="nav-example-2" class="tab-pane fade" aria-labelledby="nav-example-2-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 02
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>

Tabs (data-bs-toggle="tab") should be contained inside a nav nav-tabs...
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu nav nav-tabs" aria-labelledby="dropdownEx">
<li class="dropdown-item p-0">
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active" data-bs-toggle="tab" data-bs-target="#nav-example-1" aria-controls="nav-example-1" aria-selected="true"> Example 01 </button>
</li>
<li class="dropdown-item p-0">
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-example-2" aria-controls="nav-example-2" aria-selected="false"> Example 02 </button>
</li>
</ul>
</div>
</div>
<div class="col">
<div class="tab-content">
<div role="tabpanel" id="nav-example-1" class="tab-pane fade show active" aria-labelledby="nav-example-1-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 01
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"></ul>
</li>
</ul>
</div>
<div role="tabpanel" id="nav-example-2" class="tab-pane fade" aria-labelledby="nav-example-2-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 02
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Demo
Caveat: This is not the intended use of Bootstrap Tabs and Dropdowns. Dropdowns aren't designed used to toggle Tabs, and Tabs aren't meant to be used in the Navbar.

This doesn't describe why it's happening, but if you would like a solution.
Remove some of the attributes associated with the dropdown list item buttons (see below for example). Depending on what you want to do, you can either set up JavaScript event listeners for those buttons. Or you can change the buttons to anchor tags and navigate to a different page.
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu" aria-labelledby="dropdownEx">
<li>
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active">
Example 01
</button>
</li>
<li>
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item">
Example 02
</button>
</li>
</ul>
</div>

"Leaf" menu items like Example 1 and Example 2 should not contain data-bs-toggle="dropdown"

Trigger click is not working using bootstrap 4 tabs

I'm using bootstrap 4 tabs as pages, there is a issue because i want to display tabs/pages content on body click but when i'm using body click then trigger click is not working on prev and next buttons otherwise its working fine, how can i fix it?
My Code:-
$('.pageStepsTabs').hide();
/* customPageSteps begin here */
$('#customPageStepBtns').on('click', '.btnNext', function () {
$('.pageStepsTabs li > .active').parent('li').next('li').find('a').trigger('click');
$('.mobile-page-menu-list').hide();
});
$('#customPageStepBtns').on('click', '.btnPrev', function () {
$('.pageStepsTabs li > .active').parent('li').prev('li').find('a').trigger('click');
$('.mobile-page-menu-list').hide();
});
/* customPageSteps ends here */
/* dynamicPages begin here */
var allPages =`
<div class="tab-pane active" id="page1">page 1</div>
<div class="tab-pane fade" id="page2">page 2</div>
<div class="tab-pane fade" id="page3">page 3</div>
`
$('body').on('click', function () {
$('#dynamicPages').html(allPages)
});
/* dybamicPages ends here */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs pageStepsTabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#page1">page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page2">page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page3">page 3</a>
</li>
</ul>
<div id="dynamicPages" class="tab-content">
</div>
<!-- page buttons -->
<div id="customPageStepBtns">
<div class="row m-0 mt-4 mb-4">
<div class="col-md-12">
<div class="float-left">
<button type="button" class="btn btn-primary btn-sm btnPrev"><i class="fa fa-chevron-left"></i> Prev</button>
</div>
<div class="float-right">
<button type="button" class="btn btn-primary btn-sm btnNext">Next <i class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>

Add e.stopPropagation(); on both button next and prev click function.
This will prevent the click function propagation to the body.
Check the snippet
$('.pageStepsTabs').hide();
/* customPageSteps begin here */
$('#customPageStepBtns').on('click', '.btnNext', function(e) {
e.stopPropagation();
$('.pageStepsTabs li > .active').parent('li').next('li').find('a').trigger('click');
$('.mobile-page-menu-list').hide();
});
$('#customPageStepBtns').on('click', '.btnPrev', function(e) {
e.stopPropagation();
$('.pageStepsTabs li > .active').parent('li').prev('li').find('a').trigger('click');
$('.mobile-page-menu-list').hide();
});
/* customPageSteps ends here */
/* dynamicPages begin here */
var allPages = `
<div class="tab-pane active" id="page1">page 1</div>
<div class="tab-pane fade" id="page2">page 2</div>
<div class="tab-pane fade" id="page3">page 3</div>
`
$('body').on('click', function() {
$('#dynamicPages').html(allPages)
});
/* dybamicPages ends here */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs pageStepsTabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#page1">page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page2">page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page3">page 3</a>
</li>
</ul>
<div id="dynamicPages" class="tab-content">
</div>
<!-- page buttons -->
<div id="customPageStepBtns">
<div class="row m-0 mt-4 mb-4">
<div class="col-md-12">
<div class="float-left">
<button type="button" class="btn btn-primary btn-sm btnPrev"><i class="fa fa-chevron-left"></i>
Prev</button>
</div>
<div class="float-right">
<button type="button" class="btn btn-primary btn-sm btnNext">Next <i
class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>

Bootstrap 4 tab.js active states stuck

2 of the 4 tab.js examples aren't working for me in CodePen and a local html file. In the "nav" example the items in the dropdown stay active and can't be accessed again after clicking way. Same goes for all the items in the vertical tabs: https://codepen.io/DannyJoris/pen/MvqMEW
At first I thought maybe there's a bug in the provided code snippets, but the bugs persist even when I copy the markup of the working example using the inspector tool. That makes me think something is wrong in the way I include the Bootstrap files.
These are the included CDN files:
CSS:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css
JavaScript:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.8/popper.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js
Tested on macOS 10.12.6, Chrome 60 & Firefox 55
Edit: it does work when using Bootstrap 3.3.7: https://codepen.io/DannyJoris/pen/VzEZmw, so it must be a bug in Bootstrap.

If your issue is related to the vertical and pills I may suggest to add the following handlers:
$('.nav-pills > a').on('shown.bs.tab', function (e) {
$(this).siblings().removeClass('active');
})
$('.nav-pills .dropdown').on('show.bs.dropdown', function (e) {
$(this).siblings().find('.active').removeClass('active');
})
Remember: the IDs must be unique (refer: myTab)
$('.nav-pills > a').on('show.bs.tab', function (e) {
$(this).siblings().removeClass('active');
})
$('.nav-pills .dropdown').on('show.bs.dropdown', function (e) {
$(this).siblings().find('.active').removeClass('active');
})
#v-pills-tab {
float: left;
display: inline-block;
width: 50%;
}
#v-pills-tabContent {
float: left;
display: inline-block;
width: 50%;
}
.container {
margin-top: 30px;
margin-bottom: 30px;
}
h2 {
margin: 15px 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- ul -->
<h2>ul</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">#fat</a>
<a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">#mdo</a>
</div>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">1...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">2...</div>
<div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">3...</div>
<div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">4...</div>
</div>
<!-- nav -->
<h2>nav</h2>
<nav class="nav nav-tabs" id="myTab1" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-expanded="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile">Profile</a>
<div class="dropdown">
<a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="nav-dropdown1-tab" href="#nav-dropdown1" role="tab" data-toggle="tab" aria-controls="nav-dropdown1">#fat</a>
<a class="dropdown-item" id="nav-dropdown2-tab" href="#nav-dropdown2" role="tab" data-toggle="tab" aria-controls="nav-dropdown2">#mdo</a>
</div>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">1...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">2...</div>
<div class="tab-pane fade" id="nav-dropdown1" role="tabpanel" aria-labelledby="nav-dropdown1-tab">3...</div>
<div class="tab-pane fade" id="nav-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab">4...</div>
</div>
<!-- pills -->
<h2>pills</h2>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">#fat</a>
<a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">#mdo</a>
</div>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">1...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">2...</div>
<div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">3...</div>
<div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="pills-dropdown2-tab">4...</div>
</div>
<!-- vertical -->
<h2>vertical</h2>
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">1...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">2...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">3...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">4...</div>
</div>
</div>

It looks like this is resolved in beta: https://github.com/twbs/bootstrap/issues/23708#issuecomment-325263323

expand grid system column when i click in a icon bootstrap

I have an google maps in a tab with bootstrap, but the map become to small, so i want to change a bootstrap grid system when i click on fa icon, i want the first column torns to col-md-8, and the second column torn to col-md-4.
thx,
here my code:
<h2 class="block-title">Mapas Brasil</h1>
<div class="row">
<div class="col-md-6">
<ul class="nav nav-tabs nav-cptec">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#menu1" role="tab">Condição Atual</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2" role="tab">Aviso</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3" role="tab">Temperaturas</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="menu1" role="tabpanel">
<div id="map-canvas"></div>
</div>
<div class="tab-pane" id="menu2" role="tabpanel">Aviso</div>
<div class="tab-pane" id="menu3" role="tabpanel">Temperaturas</div>
</div>
<div class="col-md-6">
<ul class="nav nav-tabs nav-justified nav-cptec">
<li class="nav-item">
<a class="d-flex align-items-center nav-link active" data-toggle="tab" href="#menu-1" role="tab">Anánalise Sinótica</a>
</li>
<li class="nav-item">
<a class="d-flex align-items-center nav-link" data-toggle="tab" href="#menu-2" role="tab">Imagens de Satélite</a>
</li>
<li class="nav-item">
<a class="d-flex align-items-center nav-link" data-toggle="tab" href="#menu-3" role="tab">Vale do Paraíba</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="menu-1" role="tabpanel">
<img src="/images/sinotica.png" alt="" class="img-fluid">
</div>
<div class="tab-pane" id="menu-2" role="tabpanel">Satélite</div>
<div class="tab-pane" id="menu-3" role="tabpanel">Vale</div>
</div>
<img src="http://i.imgur.com/mE72FHG.png" alt="Faça sua analise sinótica" class="img-fluid top5" width="100%">
</div>
</div>

$('#abrir').click(function() {
$('#teste').removeClass('col-md-6').addClass('col-md-8 open');
$('#teste2').removeClass('col-md-6').addClass('col-md-4');
});
$('body').click(function(e){
//Detect if click is outside #abrir AND is "open"
if($(e.currentTarget).closest('#abrir').length==0 && $('#abrir').hasClass('open')){
$('#teste').addClass('col-md-6').removeClass('col-md-8 open');
$('#teste2').addClass('col-md-6').removeClass('col-md-4');
}
});
This should do the trick. What you want is to reverse what you do on the click element. Put an event on the body, to listen for every click and inside this handler, see if the clicked element is inside or outside the targeted element to make sure we trigger accordingly.
You'll have to make sure that all click handlers on your page do not prevent event bubbling (it shouldn't, as it is bad practice) or else the click outside the element will not always be seen...

i added this code and change the column to col-md-6 to col-md-4, but when i click out, dont turn back.
javascript its the same that you gave to me
my code:
<div class="row">
<div id="teste" class="col-md-6">
<ul class="nav nav-tabs nav-cptec">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#menu1" role="tab">Condição Atual</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2" role="tab">Aviso</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3" role="tab">Temperaturas</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="menu1" role="tabpanel">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true" id="abrir"></i>
<div id="map-canvas"></div>
</div>
<div class="tab-pane" id="menu2" role="tabpanel">Aviso</div>
<div class="tab-pane" id="menu3" role="tabpanel">Temperaturas</div>
</div>
</div>