I'm currently working on adapting a code snippet from bootsnip that creates horizontal Bootstrap tabs with material-style design. I've encountered some challenges in converting it to Bootstrap 4, specifically in updating the CSS to use .nav-item for li elements and .nav-link for anchors. The output doesn't match my expectations.
Here is the original code using Bootstrap 3: horizontal tab
And below is my attempt at using Bootstrap 4:
.no-style{
text-decoration:none!important;
}
.nav-tabs {
background-color:#333;
border-bottom: 2px solid #DDD;
}
.nav-tabs > .nav-item > .nav-link.active, .nav-tabs > .nav-item > .nav-link.active:focus, .nav-tabs > .nav-item > .nav-link.active:hover {
border-width: 0;
}
.nav-tabs > .nav-item > .nav-link {
border: none;
color: rgba(255,255,255,.6);
}
.nav-tabs > .nav-item > .nav-link.active, .nav-tabs > .nav-item > .nav-link:hover {
border: none;
color: rgba(255,255,255,1);
background: transparent;
}
.nav-tabs > .nav-item > .nav-link::after {
content: "";
background: #4285F4;
height: 2px;
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
transition: all 250ms ease 0s;
transform: scale(0);
}
.nav-tabs > .nav-item > .nav-link.active::after, .nav-tabs > .nav-item:hover > .nav-link::after {
transform: scale(1);
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Nav tabs -->
<div class="card">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item"><a href="#home" class="nav-link no-style active" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation" class="nav-item"><a href="#profile" class="nav-link no-style" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation" class="nav-item"><a href="#messages" class="nav-link no-style" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation" class="nav-item"><a href="#settings" class="nav-link no-style" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="home">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div role="tabpanel" class="tab-pane fade" id="messages">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960...
</div>
<div role="tabpanel" class="tab-pane fade" id="settings">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged...
</div>
</div>
</div>
</div>
</div>
</div>