<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 ----------> <ul class="nav nav-tabs" id="mypages" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="contentsteps" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="content" aria-selected="true">contentsteps</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="data-tab" data-bs-toggle="tab" data-bs-target="#data" type="button" role="tab" aria-controls="data" aria-selected="false">DATA</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="links-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button> </li> </ul> <div class="tab-content" id="myPages"> <div class="tab-pane fade show active" id="content" role="tabpanel" aria-labelledby="contentsteps">CONTENT TAB</div> <div class="tab-pane fade" id="data" role="tabpanel" aria-labelledby="data-tab">DATA TAB</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="links-tab">LINKS Upcomming</div> </div>