content logo

Bootstrap Paginations:

Bootstrap Pagination with Border Animation Effect

As you can see, these pagination are purple. These page layouts can be used for purple and white themed websites. All of these pagination are in purple border and are numeric. The items of this pagination do not have a background, but in hover mode, their background becomes pale gray. The border of each item also changes from square to circular at the time of the hover.

#

Bootstrap Dynamic Pagination

#

BS Pagination Code

#

Pagination Border Hover Effect

#

HTML Square Pagination

<!-- This script got from frontendfreecode.com -->
<nav class="Pager" aria-label="pagination example">
    <ul class="pagination pagination-circle justify-content-center">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" 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>  <a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
nav{
  margin:0 auto;
  padding-top:60px;
}
.Pager .pagination .page-item .page-link{
  color:#bd10bc;
  border:2px solid #bd10bc !important;
}
.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);
}
.Pager .pagination.pagination-circle .page-item.active .page-link {
    color:white;
}
.Pager .pagination.pagination-circle .page-item.active .page-link:hover{
  background-color:#bd10bc;
}
.Pager .pagination .page-item .page-link.prev, .Pager4 .pagination .page-item .page-link.next{
  border:0!important;
}
.Pager .pagination .page-item .page-link.prev:hover, .Pager4 .pagination .page-item .page-link.next:hover{
  background-color:initial;
}
.Pager .pagination .page-item .page-link:hover {
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    border-radius: .125rem;
    background-color: #eee;
}
.Pager .pagination.pagination-circle .page-item .page-link:hover {
    border-radius: 50%;
}
.pagination.pagination-circle .page-item.active .page-link {
    background-color:#810b81;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
<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;
}
.Pager .pagination .page-item .page-link{
  color:#bd10bc;
  border:2px solid #bd10bc !important;
}
.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);
}
.Pager .pagination.pagination-circle .page-item.active .page-link {
    color:white;
}
.Pager .pagination.pagination-circle .page-item.active .page-link:hover{
  background-color:#bd10bc;
}
.Pager .pagination .page-item .page-link.prev, .Pager4 .pagination .page-item .page-link.next{
  border:0!important;
}
.Pager .pagination .page-item .page-link.prev:hover, .Pager4 .pagination .page-item .page-link.next:hover{
  background-color:initial;
}
.Pager .pagination .page-item .page-link:hover {
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    border-radius: .125rem;
    background-color: #eee;
}
.Pager .pagination.pagination-circle .page-item .page-link:hover {
    border-radius: 50%;
}
.pagination.pagination-circle .page-item.active .page-link {
    background-color:#810b81;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
</style>

</head>
<body>
<nav class="Pager" aria-label="pagination example">
    <ul class="pagination pagination-circle justify-content-center">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" 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 id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview