<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Month Pagination</h2>
<p>The .pagination class provides pagination links and were added custom classes for month/year preview</p>
<div class="text-center">
<ul class="pagination">
<li><a href="#">«</a></li>
<li>
<a href="javascript:void(0)">
<p class="pag-month">Jan</p>
<p class="pag-year">2017</p>
</a>
</li>
<li class="active">
<a href="javascript:void(0)">
<p class="pag-month">Fev</p>
<p class="pag-year">2017</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<p class="pag-month">Mar</p>
<p class="pag-year">2017</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<p class="pag-month">Abr</p>
<p class="pag-year">2017</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<p class="pag-month">Mai</p>
<p class="pag-year">2017</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<p class="pag-month">Jun</p>
<p class="pag-year">2017</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<p class="pag-month">Jul</p>
<p class="pag-year">2017</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<p class="pag-month">Ago</p>
<p class="pag-year">2017</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<p class="pag-month">Set</p>
<p class="pag-year">2017</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<p class="pag-month">Out</p>
<p class="pag-year">2017</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<p class="pag-month">Nov</p>
<p class="pag-year">2017</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<p class="pag-month">Dez</p>
<p class="pag-year">2017</p>
</a>
</li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
body {
overflow-x: hidden;
font-family: 'Oswald', sans-serif;
color: #212121;
font-size: 16px;
}
.pagination>li:first-child>a,
.pagination>li:first-child>span,
.pagination>li:last-child>a,
.pagination>li:last-child>span{
/*margin-left: 0;*/
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding: 18px 24px;
border: 1px solid #ccc;
}
.pagination>li>a,
.pagination>li>span {
text-align: center;
border: none;
margin-left: 2px;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
background-color: #727272;
border-color: #727272;
}
.pag-month {
font-size: 20px;
font-weight: 700;
color: #999;
text-transform: uppercase;
margin: 0;
}
.pag-year {
font-size: 12px;
font-weight: 400;
color: #515151;
margin-bottom: 3px;
}
.pagination>.active>a .pag-month,
.pagination>.active>a .pag-year,
.pagination>.active>a:focus .pag-month,
.pagination>.active>a:focus .pag-year,
.pagination>.active>a:hover .pag-month,
.pagination>.active>a:hover .pag-year,
.pagination>.active>span .pag-month,
.pagination>.active>span .pag-year,
.pagination>.active>span:focus .pag-month,
.pagination>.active>span:focus .pag-year,
.pagination>.active>span:hover .pag-month
.pagination>.active>span:hover .pag-year {
color: #fff;
}