I encountered an interesting situation recently. After spending almost 3 hours troubleshooting my code, I discovered that it functions perfectly on Bootstrap v4.1.0 but fails on the latest version, v4.3.1.
Working JSFiddle with Bootstrap v4.1.0: https://jsfiddle.net/h1m87yr5/
Non-Working JSFiddle with Bootstrap v4.3.1: https://jsfiddle.net/h1m87yr5/1/
It's important to note that the code is identical in both versions. What could be causing this inconsistency?
HTML:
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active">
<a href="#1a" data-toggle="tab">Overview</a>
</li>
<li><a href="#2a" data-toggle="tab">About Us</a>
</li>
<li><a href="#3a" data-toggle="tab">Services</a>
</li>
<li><a href="#4a" data-toggle="tab">Contact Us</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<h3>Content's background color is the same for the tab</h3>
</div>
<div class="tab-pane" id="2a">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
<div class="tab-pane" id="3a">
<h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
</div>
<div class="tab-pane" id="4a">
<h3>We use css to change the background color of the content to be equal to the tab</h3>
</div>
</div>
</div>
CSS:
.nav a {
margin: 10px;
background-color: #eee;
border-radius: 2px;
padding: 7px;
}
.tab-content .tab-pane h3 {
opacity: 0;
-moz-transform: translateX(50px);
-ms-transform: translateX(50px);
-o-transform: translateX(50px);
-webkit-transform: translateX(50px);
transform: translateX(50px);
transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.tab-content .active h3 {
opacity: 1;
transform: translate(0);
}
#exTab1 .tab-content {
overflow: hidden;
}
#exTab1>.tab-content>.tab-pane {
display: block;
position: absolute;
overflow: hidden;
}