CSS Pagination Examples

    This CSS tutorial provided various HTML and CSS source codes for creating a pagination bar.

    Pagination

    A website can have multiple pages, and moving from one page to another could be tricky if the user has to enter the URL for every page, but luckily webpages contain navigation bars and paginations. A navigation bar is put at the web page's header, which helps the user move from one page to another with a click. And pagination put at the <footer> of the web-page so the user can visit from one page to another with ease.

    Let’s explore some examples of Creating responsive pagination.

    Simple pagination

    Generally, when we create pagination for our web-page we want that it should be inline, so for that, we use the display:inline-block .

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .pagi {
                  display: inline-block;
                }
    
                .pagi a {
                  float: left;
                  /*pading <a> text*/
                  color: #000000;
                  padding: 10px 18px;
                  border: 1px solid black;
                  /*remove default <a> underline*/
                  text-decoration: none;
                }
        </style>
        </head>
        <body>
            <h2>Pagination</h2>
    
            <div class="pagi">
                  <a href="#">&larr; Pre</a>
                  <a href="#">1</a>
                  <a href="#">2</a>
                  <a href="#">3</a>
                  <a href="#">4</a>
                  <a href="#">5</a>
                  <a href="#">6</a>
              <a href="#">&rarr; Next</a>
            </div>
        </body>
    </html>

    Active Pagination

    An active pagination will provide a specific styling to that page number on which the user currently is.

    Example

    Create a pagination and active the 3 rd page

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .pagi {
                  display: inline-block;
                }
    
                .pagi a {
                  float: left;
                  /*pading <a> text*/
                  color: #000000;
                  padding: 10px 18px;
                  border: 1px solid black;
                  /*remove default <a> underline*/
                  text-decoration: none;
                }
    
                .pagi #active{
                    background-color: black;
                    color: white;
                }
    
                /*when user hover over the pagination numbers*/
                .pagi a:hover{
                    background-color: black;
                    color: white;
                }
        </style>
        </head>
        <body>
    
            <h2>Pagination</h2>
            <div class="pagi">
                  <a href="#">&larr; Pre</a>
                  <a href="#">1</a>
                  <a href="#">2</a>
                  <a href="#" id='active'>3</a>
                  <a href="#">4</a>
                  <a href="#">5</a>
                  <a href="#">6</a>
              <a href="#">&rarr; Next</a>
            </div>
        </body>
    </html> 

    Bordered Pagination

    Using the border property, we can set border for every page number. And using the border-radius property, we can round the corners of the border.

    Example

    Round the corner of the border.

    <Note>: This example round only the first and last link of the pagination using the first-child and last-child pseudo-class.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .pagi {
                  display: inline-block;
                }
    
                .pagi a {
                  float: left;
                  /*pading <a> text*/
                  color: #000000;
                  padding: 10px 18px;
                  border: 1px solid black;
                  /*remove default <a> underline*/
                  text-decoration: none;
                }
    
                /*when user hover over the pagination numbers*/
                .pagi a:hover{
                    background-color: black;
                    color: white;
                }
    
                .pagi a:first-child{
                     border-top-left-radius: 10px;
                     border-bottom-left-radius: 10px;
                        }
    
                .pagi a:last-child {
                      border-top-right-radius: 10px;
                      border-bottom-right-radius: 10px;
                        }
        </style>
        </head>
        <body>
            <h2>Pagination</h2>
            <div class="pagi">
                  <a href="#">&larr; Pre</a>
                  <a href="#">1</a>
                  <a href="#">2</a>
                  <a href="#">3</a>
                  <a href="#">4</a>
                  <a href="#">5</a>
                  <a href="#">6</a>
                  <a href="#">&rarr; Next</a>
            </div>
        </body>
    </html>

    Space between the page links

    To provide space between the pagination links, use the margin property.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .pagi {
                  display: inline-block;
                }
    
                .pagi a {
                  float: left;
                  /*pading <a> text*/
                  color: #000000;
                  padding: 10px 18px;
                  border: 1px solid black;
                  /*remove default <a> underline*/
                  text-decoration: none;
                  /*set space between links*/
                  margin:3px;
                }
    
                /*when user hover over the pagination numbers*/
                .pagi a:hover{
                    background-color: black;
                    color: white;
                }
    
                .pagi a:first-child{
                     border-top-left-radius: 10px;
                     border-bottom-left-radius: 10px;
                        }
    
                .pagi a:last-child {
                      border-top-right-radius: 10px;
                      border-bottom-right-radius: 10px;
                        }
        </style>
        </head>
        <body>
    
            <h2>Pagination</h2>
            <div class="pagi">
                  <a href="#">&larr; Pre</a>
                  <a href="#">1</a>
                  <a href="#">2</a>
                  <a href="#">3</a>
                  <a href="#">4</a>
                  <a href="#">5</a>
                  <a href="#">6</a>
                  <a href="#">&rarr; Next</a>
            </div>
        </body>
    </html>

    Size of the page link box

    The size of the pagination box can be increased using the font-size property. It will increase the size of the text font and, ultimately, the page link box's size.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .pagi {
                  display: inline-block;
                }
    
                .pagi a {
                  float: left;
                  /*pading <a> text*/
                  color: #000000;
                  padding: 10px 18px;
                  border: 1px solid black;
                  /*remove default <a> underline*/
                  text-decoration: none;
                  font-size: 20px
                }
    
                /*when user hover over the pagination numbers*/
                .pagi a:hover{
                    background-color: black;
                    color: white;
                }
        </style>
        </head>
        <body>
            <h2>Pagination</h2>
    
            <div class="pagi">
                  <a href="#">&larr; Pre</a>
                  <a href="#">1</a>
                  <a href="#">2</a>
                  <a href="#">3</a>
                  <a href="#">4</a>
                  <a href="#">5</a>
                  <a href="#">6</a>
              <a href="#">Next &rarr; </a>
            </div>
        </body>
    </html>

    Center the pagination box

    To set the pagination box at the center, wrap the box within a <div> element and set the text-align:center.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
    
                /*align the pagianiton at the center*/
                .center{
                    text-align: center;
                }
    
                .pagi {
                  display: inline-block;
                }
    
                .pagi a {
                  float: left;
                  /*pading <a> text*/
                  color: #000000;
                  padding: 10px 18px;
                  border: 1px solid black;
                  /*remove default <a> underline*/
                  text-decoration: none;
                  font-size: 20px
                }
    
                /*when user hover over the pagination numbers*/
                .pagi a:hover{
                    background-color: black;
                    color: white;
                }
    
        </style>
        </head>
        <body>
            <h2>Pagination</h2>
            <div class="center">
                <div class="pagi">
                      <a href="#">&larr; Pre</a>
                      <a href="#">1</a>
                      <a href="#">2</a>
                      <a href="#">3</a>
                      <a href="#">4</a>
                      <a href="#">5</a>
                      <a href="#">6</a>
                  <a href="#">Next &rarr; </a>
                </div>
            </div>
        </body>
    </html>

    Summary

    • Pagination resides at the bottom side of the web page and helps users move from one page to another.
    • Use the display:inline-block to inline all the page links.
    • To center a pagination box wrap around it a <div> element and use the text-align:center
    • For an active page, define a different styling for the page link.

    People are also reading: