content logo

Bootstrap Paginations:

Bootstrap Square Pagination with Hover Effect

The pagination system can be used to end the tables and to shorten the length of long tables. With the help of pagination, the user does not need to scroll much and only has to select the desired page. These pages can have different styles. One of these styles is in this code. In this post, by placing the mouse on each of the numbers, a light gray square is placed in the background of the number.

#

Free Pagination Code

#

HTML Pagination Example

#

Pure CSS Pagination

#

Responsive Square Pagination

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <nav class="Pager2" aria-label="pagination example">
    <ul class="pagination justify-content-center">
        <!--Arrow left-->
        <li class="page-item disabled">
            <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
        </li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        
        <li class="page-item">
            <a class="page-link" href="#" 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>
                                                                            
nav{
  margin:0 auto;
  padding-top:60px;
}
.Pager2 .pagination .page-item .page-link:hover {
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    border-radius: .125rem;
    background-color: #eee;
}
.Pager2 .pagination.pg-blue .page-item.active .page-link:hover {
    background-color: #2bbbad;
}
.Pager2 .pagination .page-item.active .page-link {
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    border-radius: .125rem;
    background-color: #2bbbad;
    color: #fff;
}
.Pager2 .pagination .page-item .page-link {
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    outline: 0;
    border: 0;
    background-color: transparent;
    font-size: .9rem;
    color: black;
}
.Pager2 .pagination .page-item.active .page-link{
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
.Pager2 .page-link{
  border:none!important;
}
.Pager2 .page-link:focus {
    z-index: 2;
    outline: 0;
    box-shadow: 0;
}
<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>
nav{
  margin:0 auto;
  padding-top:60px;
}
.Pager2 .pagination .page-item .page-link:hover {
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    border-radius: .125rem;
    background-color: #eee;
}
.Pager2 .pagination.pg-blue .page-item.active .page-link:hover {
    background-color: #2bbbad;
}
.Pager2 .pagination .page-item.active .page-link {
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    border-radius: .125rem;
    background-color: #2bbbad;
    color: #fff;
}
.Pager2 .pagination .page-item .page-link {
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    outline: 0;
    border: 0;
    background-color: transparent;
    font-size: .9rem;
    color: black;
}
.Pager2 .pagination .page-item.active .page-link{
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
.Pager2 .page-link{
  border:none!important;
}
.Pager2 .page-link:focus {
    z-index: 2;
    outline: 0;
    box-shadow: 0;
}
</style>

</head>
<body>
<div class="container">
    <nav class="Pager2" aria-label="pagination example">
    <ul class="pagination justify-content-center">
        <!--Arrow left-->
        <li class="page-item disabled">
            <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
        </li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        
        <li class="page-item">
            <a class="page-link" href="#" 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