<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 sliding-tabs"> <li class="active"><a href="#paymentAmount" data-toggle="tab">Amount</a></li> <li><a href="#paymentMethod" data-toggle="tab">Payment Method</a></li> <li><a href="#confirmation" data-toggle="tab">Confirmation</a></li> <li><a href="#receipt" data-toggle="tab">Receipt</a></li> </ul> <div class="tab-content slide"> <div class="tab-pane slide-left in active" id="paymentAmount"> This is the amount tab </div> <div class="tab-pane slide-left" id="paymentMethod"> This is the method tab </div> <div class="tab-pane slide-left" id="confirmation"> This is the confirmation tab </div> <div class="tab-pane slide-left" id="receipt"> This is the receipt tab </div> </div>