content logo

Bootstrap Paginations:

Pagination with Underline Effect using Bootstrap

Using hover effects makes website items more interactive. In this post, we also have one of the website items that has a hover effect. This item is a numeric pagination. By placing the mouse cursor on each of the pagination items, a small triangle is displayed at the top and a line at the bottom of the number.

#

Underline Effect Pagination

#

BS Pagination Code

#

Pagination Hover Effect

#

Pure CSS Pagination

<!-- This script got from frontendfreecode.com -->
<div class="container">
<nav class="Pager" aria-label="pagination example">
    <ul class="pagination pagination-circle justify-content-center">
        <!--Arrow left-->
        <li class="page-item disabled">
            <a class="page-link prev" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>
        <!--Numbers-->
        <li class="page-item active"><a class="page-link">1</a></li>
        <li class="page-item"><a class="page-link">2</a></li>
        <li class="page-item"><a class="page-link">3</a></li>
        <li class="page-item"><a class="page-link">4</a></li>
        <li class="page-item"><a class="page-link">5</a></li>
        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link next" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav> 
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.Pager ul li:hover, .Pager ul li.active {
  border-bottom: 2px solid #b60435;
  color: #b60435;
}
nav{
  margin:0 auto;
  padding-top:60px;
}
.page-link{
  border:none!important;
}
.Pager ul li a:hover:before, .Pager ul li.active a:before {
  content: "";
  position: absolute;
  border: 4px solid transparent;
  border-top: 4px solid #b60435;
  top: -3px;
  left: 50%;
  transform: translate(-50%, 0);
}
.pagination .page-item .page-link {
    font-size: .9rem;
    color: #f08497;
    font-weight:bold;
}
.Pager .pagination .page-item.active .page-link {
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    border-radius: .125rem;
    background-color: initial;
    color: #b60435;
}
.Pager .pagination .page-item.active .page-link{
  box-shadow:none;
}
.Pager .pagination .page-item .page-link:hover {
    -webkit-transition: all 0s linear;
    transition: all 0s linear;
    border-radius: 0px;
    background-color: initial;
}
.Pager .pagination .page-item .page-link.prev:hover, .Pager .pagination .page-item .page-link.next:hover{
   border-bottom: 2px solid #b60435;
  color: #b60435;
}
.Pager .pagination .page-item .page-link.next:hover:before{
    content: none;
    position: absolute;
    border: 4px solid transparent;
    border-top: 4px solid #b60435;
    top: -3px;
    left: 50%;
    transform: translate(-50%, 0);
}
.Pager ul li.disabled:hover{
  border-bottom:none!important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.Pager ul li:hover, .Pager ul li.active {
  border-bottom: 2px solid #b60435;
  color: #b60435;
}
nav{
  margin:0 auto;
  padding-top:60px;
}
.page-link{
  border:none!important;
}
.Pager ul li a:hover:before, .Pager ul li.active a:before {
  content: "";
  position: absolute;
  border: 4px solid transparent;
  border-top: 4px solid #b60435;
  top: -3px;
  left: 50%;
  transform: translate(-50%, 0);
}
.pagination .page-item .page-link {
    font-size: .9rem;
    color: #f08497;
    font-weight:bold;
}
.Pager .pagination .page-item.active .page-link {
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    border-radius: .125rem;
    background-color: initial;
    color: #b60435;
}
.Pager .pagination .page-item.active .page-link{
  box-shadow:none;
}
.Pager .pagination .page-item .page-link:hover {
    -webkit-transition: all 0s linear;
    transition: all 0s linear;
    border-radius: 0px;
    background-color: initial;
}
.Pager .pagination .page-item .page-link.prev:hover, .Pager .pagination .page-item .page-link.next:hover{
   border-bottom: 2px solid #b60435;
  color: #b60435;
}
.Pager .pagination .page-item .page-link.next:hover:before{
    content: none;
    position: absolute;
    border: 4px solid transparent;
    border-top: 4px solid #b60435;
    top: -3px;
    left: 50%;
    transform: translate(-50%, 0);
}
.Pager ul li.disabled:hover{
  border-bottom:none!important;
}
</style>

</head>
<body>
<div class="container">
<nav class="Pager" aria-label="pagination example">
    <ul class="pagination pagination-circle justify-content-center">
        <!--Arrow left-->
        <li class="page-item disabled">
            <a class="page-link prev" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>
        <!--Numbers-->
        <li class="page-item active"><a class="page-link">1</a></li>
        <li class="page-item"><a class="page-link">2</a></li>
        <li class="page-item"><a class="page-link">3</a></li>
        <li class="page-item"><a class="page-link">4</a></li>
        <li class="page-item"><a class="page-link">5</a></li>
        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link next" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav> 
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview