<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <ul class="nav nav-pills nav-fill navtop"> <li class="nav-item"> <a class="nav-link active" href="#menu1" data-toggle="tab">پرسش ها</a> </li> <li class="nav-item"> <a class="nav-link" href="#menu2" data-toggle="tab">پاسخ ها</a> </li> <li class="nav-item"> <a class="nav-link" href="#menu3" data-toggle="tab">نظرات</a> </li> </ul> <div class="tab-content float-right"> <div class="tab-pane active" role="tabpanel" id="menu1">Created By Cytus ۱</div> <div class="tab-pane" role="tabpanel" id="menu2">Created By Cytus ۲</div> <div class="tab-pane" role="tabpanel" id="menu3">Created By Cytus ۳</div> </div> </div>

.container{ direction: rtl; } .navtop{ margin-top:50px; } .tab-content { padding: 40px; margin-top: -20px; }