How to add a Pagination to your Webpage

In this article, we will tell you an excellent way to navigate large amounts of content, to your website using a jQuery Bootstrap Plugin. Pagination allows you to make large amounts of content easy to find and breaks up several entries or web content into multiple pages, allowing you to toggle through content with ease.

Below are the HTML, CSS, and JavaScript required.

Add the HTML below to your web page

<nav>
<ul class="pagination">
<li class="not-allow"><span><i>«</i></span></li>
<li class="not-allow"><span><i>‹</i></span></li>
<li class="active"><span class="current">1</span></li><li><a href="#" class="inactive">2</a></li><li><a href="#" class="inactive">3</a></li><li><a href="#" class="inactive">4</a></li><li><a href="#" class="inactive">5</a></li><li><a href="#" class="inactive">6</a></li><li class="bothends"><a href="#" class="inactive">7</a></li><li><a href="#"><i>›</i></a></li>
<li><a href="#"><i>»</i></a></li>
</ul>
</nav>

Add the CSS below to the stylesheet of your website

nav {
    display: block;
  margin-top: 40vh;
}
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    list-style: none;
    border-radius: .25rem;
  text-align: center;
  color: #484b5a;
}
.pagination>li {
    padding: 0 3px;
  flex: 1 1 42px;
    max-width: 42px;
    min-width: 27px;
    float: left;
  font-size: 1.4rem;
}
.pagination>.active>span, .pagination>li>a:hover {
    background: 0 0;
    border-bottom: 2px solid #f564a9;
    color: #f564a9;
}
.pagination>li>a, .pagination>li>span {
    display: inline-block;
    text-decoration: none;
    width: 100%;
    padding: 6px 0;
    color: inherit;
    background: #fff;
    border-right: 0;
}

Output :