Bootstrap4 nav-item issue - twitter-bootstrap-3

Question

I am movig a project from Bootstrap 3 to Bootstrap 4...
the following code was working fine w Bootstrap 3 , but it's not with Bootstrap 3...
here is the jsFiddle test and the html code
Boostrap3 behavior :
initial button 1 is active
when the user click on one of the 3 buttons, it displays the corresponding tab. And the button is raised up, the other buttons stay down.
Boostrap 4 behavior :
initial button 1 is active
when the user click on one of the 3 buttons, it displays the corresponding tab. And the button is raised up, the other buttons never go down.. they stay active...
<section id="memberships" class="memberships">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="header-text">TEST</h2>
<div class="memberships-mockup">
<div id="nav-tabContent" class="tab-content">
<div id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab" class="tab-pane fade show active"><p>1111111111</p></div>
<div id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab" class="tab-pane fade"><p>2222222222</p></div>
<div id="nav-third" role="tabpanel" aria-labelledby="nav-third-tab" class="tab-pane fade"><p>3333333333</p></div>
</div>
</div>
</div>
</div>
<div id="myTab" role="tablist" class="nav nav-tabs">
<div class="row">
<div class="col-sd-4">
<a id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-expanded="true" class="nav-item nav-link active"><span class="number">1</span></a>
</div>
<div class="col-sd-4">
<a id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" class="nav-item nav-link"><span class="number">2</span></a>
</div>
<div class="col-sd-4">
<a id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third" class="nav-item nav-link"><span class="number">3</span></a>
</div>
</div>
</div>
</div>
</section>

Answer 1

If you want the nav-tabs behavior to work properly in Bootstrap 4, each tab should be a direct sibling, not in separate columns.
https://www.codeply.com/go/Wu5OKQvDiQ
<div id="myTab" role="tablist" class="nav nav-tabs">
<a id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-expanded="true" class="nav-item nav-link active"><span class="number">1</span></a>
<a id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" class="nav-item nav-link"><span class="number">2</span></a>
<a id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third" class="nav-item nav-link"><span class="number">3</span></a>
</div>