How to create pagination in Bootstrap 4 ?

29 Nov, 2021
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, one of which is the cross-browser compatibility issue.
Pagination is an element used to indicate the actuality of a series of affiliated content across multiple runners and enables navigation across them.
Introduction to Pagination: We utilize an enormous square of associated joins for our pagination, making joins hard to miss and effectively adaptable—all while giving huge hit regions. Pagination is worked with a list of HTML components so screen per user can report the number of accessible connections. Utilize a wrapping <nav> component to distinguish it as a routing area to screen per user and other assistive advances.  
Also, as pages probably have more than one such route area, it’s prudent to give a clear aria-name to the <nav>. For instance, if the pagination part is utilized to explore between a bunch of list items, a proper name could be aria-label=”Search results pages”.
 
Example:
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible"         content="IE=edge">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"        crossorigin="anonymous">      <style>        .pagination {            padding: 12rem 0 0 22rem;        }          .page-link {            background-color: green;            color: white;        }    </style></head>  <body>    <nav aria-label="navigation example">        <ul class="pagination border-success">            <li><a class="page-link" href="#">Previous</a></li>            <li><a class="page-link" href="#">11</a></li>            <li><a class="page-link" href="#">12</a></li>            <li><a class="page-link" href="#">13</a></li>            <li><a class="page-link" href="#">14</a></li>            <li><a class="page-link" href="#">15</a></li>            <li><a class="page-link" href="#">Next</a></li>        </ul>    </nav></body>  </html>
Output:
Working with icons: Hoping to utilize a symbol or image instead of text for some pagination joins. Make certain to furnish legitimate screen per user support with aria ascribes and the .sr only
Example:
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible"        content="IE=edge">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"        crossorigin="anonymous">      <style>        .pagination {            padding: 12rem 0 0 22rem;        }          .page-link {            background-color: green;            color: white;        }    </style></head>  <body>    <nav aria-label="Page navigation">        <ul class="pagination">            <li class="page-item">                <a class="page-link" href="#"                     aria-label="Previous">                    <span aria-hidden="true">«</span>                    <span class="sr-only">Previous</span>                </a>            </li>            <li><a class="page-link" href="#">11</a></li>            <li><a class="page-link" href="#">12</a></li>            <li><a class="page-link" href="#">13</a></li>            <li><a class="page-link" href="#">14</a></li>            <li><a class="page-link" href="#">15</a></li>            <li>                <a class="page-link" href="#" aria-label="Next">                    <span aria-hidden="true">»</span>                    <span class="sr-only">Next</span>                </a>            </li>        </ul>    </nav></body>  </html>
Output:
 
Disabled and Active States:
Active: Pagination joins are adjustable for various conditions. Use .active to show the current page.
Example:
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible"         content="IE=edge">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"        crossorigin="anonymous">      <style>        .pagination {            padding: 12rem 0 0 22rem;        }          .page-link {            background-color: green;            color: white;        }    </style></head>  <body>    <nav aria-label="...">        <ul class="pagination">            <li>                <a class="page-link" href="#"                     tabindex="-1">Previous</a>            </li>            <li><a class="page-link" href="#">11</a></li>            <li class="active">                <a class="page-link" href="#">12</a>            </li>            <li><a class="page-link" href="#">13</a></li>            <li class="active">            <li><a class="page-link" href="#">14</a></li>            <li class="active">            <li><a class="page-link" href="#">15</a></li>            <li class="active">                <a class="page-link" href="#">Next</a>            </li>        </ul>    </nav></body>  </html>
Output:
Disabled: While the .disabled class utilizes pointer-occasions: none to attempt to cripple the connection usefulness of <a>, that CSS property isn’t yet normalized and doesn’t represent console route. Accordingly, you ought to consistently add tab index=”- 1′′ on crippled connections and utilize custom JavaScript to completely incapacitate their usefulness.
Example:
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible"         content="IE=edge">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"    crossorigin="anonymous">          <style>        .pagination {            padding: 12rem 0 0 22rem;        }          .page-link {            background-color: green;            color: white;        }    </style></head>  <body>    <nav aria-label="...">        <ul class="pagination">            <li class="page-item disabled">                <span class="page-link">Previous</span>            </li>            <li class="page-item">                <a class="page-link" href="#">11</a>            </li>            <li class="page-item active">                <span class="page-link">                    12                    <span class="sr-only">(current)</span>                </span>            </li>            <li class="page-item">                <a class="page-link" href="#">13</a>            </li>            <li class="page-item disabled">                <a class="page-link" href="#">Next</a>            </li>        </ul>    </nav></body>  </html>
Output:
Sizing: Larger and Smaller: In this case, we will set the size of the pagination list.
Example:
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible"         content="IE=edge">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"        crossorigin="anonymous">      <style>        .pagination {            padding: 2rem 0 0 2rem;        }          .page-link {            background-color: green;            color: white;        }    </style></head>  <body>    <nav aria-label="larger">        <ul class="pagination pagination-lg">            <li class=" disabled">                <a class="page-link"                     href="#" tabindex="-1">11</a>            </li>            <li><a class="page-link" href="#">12</a></li>            <li><a class="page-link" href="#">13</a></li>        </ul>    </nav>    <nav aria-label="small">        <ul class="pagination pagination-sm">            <li class="disabled">                <a class="page-link"                     href="#" tabindex="-1">11</a>            </li>            <li><a class="page-link" href="#">12</a></li>            <li><a class="page-link" href="#">13</a></li>        </ul>    </nav></body>  </html>
Output:
Alignment: In this case, we will change the alignment of pagination components with flexbox.
Example:
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible"        content="IE=edge">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"        crossorigin="anonymous">      <style>        .pagination {            padding: 2rem 0 0 0;        }          .page-link {            background-color: green;            color: white;        }    </style></head>  <body>    <!-- Pagination in Center -->    <nav aria-label="Page navigation">        <ul class="pagination justify-content-center">            <li class="page-item disabled">                <a class="page-link" href="#"                     tabindex="-1">Previous                </a>            </li>            <li class="page-item">                <a class="page-link" href="#">11</a>            </li>            <li class="page-item">                <a class="page-link" href="#">12</a>            </li>            <li class="page-item">                <a class="page-link" href="#">13</a>            </li>            <li class="page-item">                <a class="page-link" href="#">Next</a>            </li>        </ul>    </nav>    <!-- Pagination in End -->    <nav aria-label="Page navigation">        <ul class="pagination justify-content-end">            <li class="page-item disabled">                <a class="page-link" href="#"                     tabindex="-1">Previous                </a>            </li>            <li class="page-item">                <a class="page-link" href="#">11</a>            </li>            <li class="page-item">                <a class="page-link" href="#">12</a>            </li>            <li class="page-item">                <a class="page-link" href="#">13</a>            </li>            <li class="page-item">                <a class="page-link" href="#">Next</a>            </li>        </ul>    </nav></body>  </html>
Output:
Bootstrap-4
Bootstrap-Questions
HTML-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to toggle password visibility in forms using Bootstrap-icons ?
How to set vertical alignment in Bootstrap ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property