How to align pagination in bootstrap 4?

Bootstrap CSS Web Development Front End Technology

A well-liked front-end programming framework for creating responsive, mobile-first websites is Bootstrap 4. It offers a variety of CSS and JavaScript elements, like navigation bars, forms, buttons, modals, and more, that may be used to quickly build websites with a contemporary, polished appearance.

Pagination alignment in Bootstrap 4 refers to how a web page's pagination component is positioned. Pagination is typically centered, but the. justify-content-* classes allow for left or right alignment.

Approaches

There are multiple possible methods for pagination alignment in Bootstrap 4 −

Using the .justify-content-* classes
Using the text-* classes

Let us look at each approach in detail with examples now.

Approach 1: Using “.justify-content-* classes”

The first approach for pagination alignment in bootstrap 4 is “using .justify-content-* classes”.

Example

Here, we will go through a step-by-step example to implement this approach −

Step 1 − Make sure the JavaScript and CSS files for Bootstrap 4 are included in the HTML document's head.

Step 2 − To construct a pagination component, create an <ul> element with the class pagination. For each page, add an <a> element with the class page link and an <li> element with the class page item inside the <ul> element.

Step 3 − You must add one of the following classes to the <ul> element in order to align the pagination component to the left, center, or right −

The pagination component is left-aligned using the .justify-content-start style.
The pagination component is centered when using the justify-content-center style.
align-pagination-end: Moves the pagination element to the right

Step 4 − Here is an illustration of how the HTML code might seem if pagination were to be aligned to the left −

<ul class="pagination justify-content-start">
   <li class="page-item">
      <a class="page-link" href="#">Previous</a>
   </li>
   <li class="page-item">
      <a class="page-link" href="#">1</a>
   </li>
   <li class="page-item">
      <a class="page-link" href="#">2</a>
   </li>
   <li class="page-item">
      <a class="page-link" href="#">Next</a>
   </li>
</ul>

Step 5 − After adding the desired class, the pagination component ought to be aligned as you had intended.

Step 6 − The final code looks like the code below −

<!DOCTYPE html>
<html>
<head>
   <link rel= "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
      <div class="row justify-content-center">
         <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
               <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 class="page-item"><a class="page-link" href="#">1</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="#" aria-label="Next">
                     <span aria-hidden="true">»</span>
                     <span class="sr-only">Next</span>
                  </a>
               </li>
            </ul>
         </nav>
      </div>
   </div>
</body>
</html>

Approach 2: Using the text-* classes

To align the pagination component to the left, center, or right, respectively, use the. text-left,text-center, and. text-right classes.

Example

We will now look at a step-by-step example of implementing this approach −

Step 1 − Create a container div element and assign it the class justify-content-center. The pagination will be centered inside the container as a result.

<div class="justify-content-center">

Step 2 − Create an <ul> element within the container div and give it the classes pagination and align-pagination-links-to-desired-side (e.g text-center, text-left, textright)

<ul class="pagination text-center">

Step 3 − Create <li> elements for each page number or the previous and next buttons inside the <ul> element. Give the class "page-item" to each li element.

<li class="page-item">

Step 4 − Create an <a> element for the button or page number inside of each <li> element. Give the class "page-link" to the <a> element.

<a class="page-link" href="#">1</a>

Step 5 − The final code looks like the code below −

<!DOCTYPE html>
<html>
<head>
   <link rel= "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="justify-content-center">
      <ul class="pagination text-center">
         <li class="page-item">
            <a class="page-link" href="#">Previous</a>
         </li>
         <li class="page-item">
            <a class="page-link" href="#">1</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="#">Next</a>
         </li>
      </ul>
   </div>
</body>
</html>

Conclusion

Making use of the built-in classes offered by the framework will make aligning pagination in Bootstrap 4 a straightforward affair. You may make a pagination component that is completely functional and visually centered on the page by using the step-by-step process described above. Including the Bootstrap CSS and JavaScript files in your project, establishing a nav element with an aria-label attribute, and giving the unordered list element holding the pagination links. the textcenter class will do this. With this strategy, it is simple to change the color and orientation of the pagination without creating a substantial amount of unique CSS.