How to align pagination in Bootstrap 4?

Bootstrap 4 is a popular front-end programming framework for creating responsive, mobile-first websites. It provides various CSS and JavaScript elements such as navigation bars, forms, buttons, modals, etc. that may be used to quickly build a website with a modern and beautiful look.

Pagination alignment in Bootstrap 4 refers to the way the pagination components of a web page are positioned. Pagination is usually centered, however. The justify-content-* classes allow left or right alignment.

method

There are many possible ways to align pagination in Bootstrap 4 -

• Use .justify-content-* classes

• Use text-* classes

Now let us understand each method in detail with examples.

Method 1: Use “.justify-content-* classes”

The first way to align pagination in Bootstrap 4 is "using the .justify-content-* classes".

Example

Here we will implement this method with a step-by-step example -

Step 1- Make sure that the Bootstrap 4 JavaScript and CSS files are included in the head of the HTML document.

Step 2- To build the pagination component, create the

element using the pagination class. For each page, add an element with a page-like link and an
• element with a page-like item inside the
  element.

  Step 3- You must add one of the following classes to the

  element to align the pagination component left, center, or right -

  • The paging component uses the .justify-content-start style to align left.

  • The pagination component is centered when using the justify-content-center style.

  • align-pagination-end: Move the pagination element to the right

  Step 4- This is an example of what the HTML code will look like when pagination is left aligned -

   
   Previous 
   
   1 
   
   2 
   
   Next 
   

  Copy after login

  Step 5- After adding the required classes, the pagination component should align as you expect.

  Step 6- The final code looks like this -

  Copy after login

  Method 2: Use text-* class

  To align the pagination components to the left, center, or right respectively, use . Text Left, Text Center and. Text right class.

  Example

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

  Step 1- Create a container div element and assign it the class justify-content-center. As a result, the pagination will be centered within the container.

  Copy after login

  Step 2- Create an

  element within the container div and give it class pagination and align-pagination-links-to-desired-side (e.g. text-center, text- left, textright) )

  Copy after login

  Step 3- Create

  • elements for each page number or previous and next buttons within a
    element. Specify the "page-item" class for each li element.

    Copy after login

    Step 4- Create anelement for the button or page number within each

    • element. Assign the class "page-link" to theelement.

      1

      Copy after login

      Step 5- The final code looks like this -

                         
                         
      
                          
      
                           
                          
                         
                         
      
                          
      
                           
                          
                         
       
       
      Previous

    • 1
    • 2
    • 3
    • Next