content logo

Bootstrap Paginations:

Bootstrap Circular Pagination with Border

If the theme of your website is light and brown, you can use this code to pagination and number the content. As you can see, all the numbers in this code are brown. The selected number has a thin brown and circular border. On both sides of the numbers, we see the previous and next statements, which, if the number of pages is large, prevents the display of a large number of numbers.

#

Rounded Pagination Code

#

BS Pagination Border

#

Responsive CSS Pagination

#

Bootstrap Circular Pagination

<!-- This script got from frontendfreecode.com -->
<nav class="Pager" aria-label="pagination example">
    <ul class="pagination pagination-circle justify-content-center">
        <!--First-->
        <li class="page-item disabled"><a class="page-link">First</a></li>
        <!--Arrow left-->
        <li class="page-item disabled">
            <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" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
        <!--Last-->
        <li class="page-item"><a class="page-link">Last</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.pagination-circle .page-item.active .page-link {
    border-radius: 50%;
    border: 1px solid #BD5410!important;
    background-color:white;
    color:#BD5410;
    font-weight:bold;
}
.Pager .pagination .page-item.active .page-link{
    box-shadow:none;
}
.Pager .pagination .page-item .page-link{
  color:#BD5410;
}
.page-link{
  border:none!important;
}
.pagination.pagination-circle .page-item .page-link:hover {
    border-radius: 50%;
}
.pagination .page-item .page-link {
    font-size: .9rem;
    font-weight:bold;
}
<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.pagination-circle .page-item.active .page-link {
    border-radius: 50%;
    border: 1px solid #BD5410!important;
    background-color:white;
    color:#BD5410;
    font-weight:bold;
}
.Pager .pagination .page-item.active .page-link{
    box-shadow:none;
}
.Pager .pagination .page-item .page-link{
  color:#BD5410;
}
.page-link{
  border:none!important;
}
.pagination.pagination-circle .page-item .page-link:hover {
    border-radius: 50%;
}
.pagination .page-item .page-link {
    font-size: .9rem;
    font-weight:bold;
}
</style>

</head>
<body>
<nav class="Pager" aria-label="pagination example">
    <ul class="pagination pagination-circle justify-content-center">
        <!--First-->
        <li class="page-item disabled"><a class="page-link">First</a></li>
        <!--Arrow left-->
        <li class="page-item disabled">
            <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" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
        <!--Last-->
        <li class="page-item"><a class="page-link">Last</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