<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="bg-dark p-3"> <div class="m-5"> <div class="container"> <h1 class="text-center text-white mb-5">Custom Tab Bootstrap 4</h1> <nav> <div class="nav nav-tabs nav-fill thead-skor" id="myTab" role="tablist"> <a class="nav-item nav-link active" id="skor-tab" data-toggle="tab" href="#skor" role="tab" aria-controls="skor" aria-selected="true">Kartu Skor Poedji Rochyati</a> <a class="nav-item nav-link" id="preeklampsia-tab" data-toggle="tab" href="#preeklampsia" role="tab" aria-controls="preeklampsia" aria-selected="false">Skrining Preeklampsia</a> </div> </nav> <div class="tab-content tab-skor" id="myTabContent"> <div class="tab-pane fade show active" id="skor" role="tabpanel" aria-labelledby="skor-tab"> <div class="p-3"> <div class="p-5 bg-white text-center"> <h2>AKU TAB 1</h2> </div> </div> </div> <div class="tab-pane fade" id="preeklampsia" role="tabpanel" aria-labelledby="preeklampsia-tab"> <div class="p-3"> <div class="p-5 bg-white text-center"> <h2>AKU TAB 2</h2> </div> </div> </div> </div> </div> </div> </div>

.tab-skor { background-color: #ECECEC; padding-bottom: 0.25rem; } .nav-tabs a { color: #000; } nav > .thead-skor a.nav-item { color: yellow; } nav > .thead-skor a.nav-item.active { color: #16AB50; background: #ECECEC; border-bottom: 2px solid #ECECEC; font-weight: 700; }