<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="container"> <div class="row"> <div class="col-md-12 text-center"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> </div> <div class="col-md-12"> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">Home</div> <div role="tabpanel" class="tab-pane" id="profile">Profile</div> <div role="tabpanel" class="tab-pane" id="messages">Message</div> <div role="tabpanel" class="tab-pane" id="settings">settings</div> </div> </div> </div> </div>

.nav-tabs { border-bottom: none; text-align: center; margin: 15px auto; text-transform: uppercase; font-weight: 500; } .nav-tabs li { display: inline-block; float: initial; min-width: 190px; margin-bottom: 15px; } .nav-tabs li a { background: #1e79f2; color: #fff; margin-left: 2px; } .nav-tabs li a:hover { background-color: #faca21 !important; border: 1px solid #faca21 !important; border-bottom-color: #faca21 !important; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { color: #fff; cursor: default; background-color: #faca21 !important; border: 1px solid #faca21 !important; border-bottom-color: #faca21 !important; } .nav-tabs > li > a { border-radius: 23px; }