Bootstrap Pagination

A user query might result in hundreds or even thousands or may be more number of records. It is not appropriate to display all the retrieved records on one page. Another scenario may be that of blog posts where you have large number of blog posts but you want to display only one or two blog posts on a page. To move through the remaining records, pagination can be used. Pagination basically adds links to specific number of pages that user can access. Bootstrap pagination class allows user to convert a normal un-ordered list to basic pagination. To highlight the page which user is visiting at the moment, add the “active” class to the “li” element of that page. Take a look at the following example to see how bootstrap pagination is implemented.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <ul class="pagination">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li class="active"><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>
          <li><a href="#">9</a></li>
          <li><a href="#">10</a></li>
        </ul>
    </body>

</html>

Download the code
Try the code

If you open the above page in browser, you should see pagination with 10 page links from 1 to 10. The link for 4th page is highlighted via blue background. This is the active page.

Bootstrap Pagination Size

You can increase or decrease the default size of the pagination element. To decrease pagination size use “pagination” and “pagination-sm” classes. For large pagination, you can use “pagination” along with “pagination-lg” class. To see small and large pagination elements in action, have a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <ul class="pagination">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li class="active"><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>
          <li><a href="#">9</a></li>
          <li><a href="#">10</a></li>
        </ul>
        <br>
             <ul class="pagination pagination-sm">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li class="active"><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>
          <li><a href="#">9</a></li>
          <li><a href="#">10</a></li>
        </ul>
        <br>
             <ul class="pagination pagination-lg">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li class="active"><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>
          <li><a href="#">9</a></li>
          <li><a href="#">10</a></li>
        </ul>
    </body>

</html>

Download the code
Try the code

Now, if you open the above page in browser, you should see three pagination elements. The first one is the default pagination, the second one is the small pagination while the third is the large pagination.

Pagination with Breadcrumbs

You can also replace default pagination with breadcrumbs. To do so, replace pagination class in the unordered list with breadcrumb class. This will create pagination where each page link is separated from other via breadcrumb. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <ul class="breadcrumb">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li class="active">Portfolio</li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Location</a></li>
         
        </ul>
    </body>

</html>

Download the code
Try the code

<<< Bootstrap Progress BarsBootstrap List Groups >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .