Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create pagination in Bootstrap 4 ?

  • Last Updated : 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=
        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=
        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=
        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=
        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=
        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=
        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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!