Attempting to incorporate pagination using the bootstrap class
.circle {
position: absolute;
left: 0;
width: 20px;
height: 20px;
border: 2px solid #777;
border-radius: 100%;
}
.pagination>li>a, .pagination>li>span {
border-radius: 100% !important;
border: 0px !important;
}
.active {
background: #777;
}<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
<li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
<li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
<li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
<li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
<li><a href="#">»</a></li>
</ul>
</div>Removing the default squares and inserting circles instead has proven challenging. Despite attempting to give border-radius to the squares, they remain oval in shape, rather than achieving a circular appearance.