<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 ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <center><h2>Pager</h2></center> <center><p>The .previous and .next classes align each link to the sides of the page:</p></center> <ul class="pager" style="background-color:#FFFFE3"> <li class="previous"><a href="#" style="background-color:blue;color:white;border-radius:5px"><span class="glyphicon glyphicon-chevron-left"></span> Önceki</a></li> <li class="previous"><a href="#" style="background-color:maroon;color:white;border-radius:5px"><span class="glyphicon glyphicon-chevron-left"></span> Önceki</a></li> <li class="next"><a href="#" style="background-color:black;color:white;border-radius:5px">Sonraki <span class="glyphicon glyphicon-chevron-right"></span></a></li> <li class="next"><a href="#" style="background-color:maroon;color:white;border-radius:5px">Sonraki <span class="glyphicon glyphicon-chevron-right"></span></a></li> </ul> </div>