Bulma – Pagination

Bulma pagination

In this guide, we will discuss Pagination in Bulma.

Description

The pagination component provides a series of related links across multiple pages. It includes the following elements −

  • pagination-previous and pagination-next − These elements can be used to link previous and next pages.
  • pagination-list − It provides the number of page items.
    • pagination-link − It specifies the number of page numbers.
    • pagination-ellipsis − It is used to specify range selectors.

The below example demonstrates usage of above elements of pagination component −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "is-size-5">
               Pagination
            </span>
            <br>
            <br>
            
            <nav class = "pagination" role = "navigation" aria-label = "pagination">
               <a class = "pagination-previous">Previous</a>
               <a class = "pagination-next">Next page</a>
               <ul class = "pagination-list">
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 1">1</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 2">2</a>
                  </li>
                  <li>
                     <span class = "pagination-ellipsis">…</span>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 25">25</a>
                  </li>
                  <li>
                     <a class = "pagination-link is-current" aria-label = "Page 26" aria-current = "page">26</a>
                  </li>
                  <li>
                     <span class = "pagination-ellipsis">…</span>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 49">49</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 50">50</a>
                  </li>
               </ul>
            </nav>
            <br>
            <br>
            
            <span class = "is-size-5">
               Disabled link
            </span>
            <br>
            <br>
            
            <nav class = "pagination" role = "navigation" aria-label = "pagination">
               <a class = "pagination-previous" title = "This is the first page" disabled>Previous</a>
               <a class = "pagination-next">Next page</a>
               <ul class = "pagination-list">
                  <li>
                     <a class = "pagination-link is-current" aria-label = "Page 1" aria-current = "page">1</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 2">2</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 3">3</a>
                  </li>
               </ul>
            </nav>
            <br>
            <br>
            
            <span class = "is-size-5">
               Centered Pagination
            </span>
            <br>
            <br>
            
            <nav class = "pagination is-centered" role = "navigation" aria-label = "pagination">
               <a class = "pagination-previous">Previous</a>
               <a class = "pagination-next">Next page</a>
               <ul class = "pagination-list">
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 1">1</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 2">2</a>
                  </li>
                  <li>
                     <span class = "pagination-ellipsis">…</span>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 25">25</a>
                  </li>
                  <li>
                     <a class = "pagination-link is-current" aria-label = "Page 26" aria-current = "page">26</a>
                  </li>
                  <li>
                     <span class = "pagination-ellipsis">…</span>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 49">49</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 50">50</a>
                  </li>
               </ul>
            </nav>
            <br>
            <br>
            
            <span class = "is-size-5">
               Right Pagination
            </span>
            <br>
            <br>
            
            <nav class = "pagination is-right" role = "navigation" aria-label = "pagination">
               <a class = "pagination-previous">Previous</a>
               <a class = "pagination-next">Next page</a>
               <ul class = "pagination-list">
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 1">1</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 2">2</a>
                  </li>
                  <li>
                     <span class = "pagination-ellipsis">…</span>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 25">25</a>
                  </li>
                  <li>
                     <a class = "pagination-link is-current" aria-label = "Page 26" aria-current = "page">26</a>
                  </li>
                  <li>
                     <span class = "pagination-ellipsis">…</span>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 49">49</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 50">50</a>
                  </li>
               </ul>
            </nav>
            
         </div>
      </section>
   </body>
   
</html>

Pagination Sizes

You can specify the size of pagination by using 3 modifiers such as is-smallis-medium and is-large to the pagination component.

The below example determines how to display the pagination in different sizes −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Pagination Sizes
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Small Pagination
            </span>
            <br>
            <br>
            
            <nav class = "pagination is-centered is-small" role = "navigation" aria-label = "pagination">
               <a class = "pagination-previous">Previous</a>
               <a class = "pagination-next">Next</a>
               <ul class = "pagination-list">
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 1">1</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 2">2</a>
                  </li>
                  <li>
                     <span class = "pagination-ellipsis">…</span>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 25">25</a>
                  </li>
                  <li>
                     <a class = "pagination-link is-current" aria-label = "Page 26" aria-current = "page">26</a>
                  </li>
                  <li>
                     <span class = "pagination-ellipsis">…</span>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 49">49</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 50">50</a>
                  </li>
               </ul>
            </nav>
            <br>
            <br>
            
            <span class = "is-size-5">
               Medium Pagination
            </span>
            <br>
            <br>
            
            <nav class = "pagination is-centered is-medium" role = "navigation" aria-label = "pagination">
               <a class = "pagination-previous">Previous</a>
               <a class = "pagination-next">Next</a>
               <ul class = "pagination-list">
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 1">1</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 2">2</a>
                  </li>
                  <li>
                     <span class = "pagination-ellipsis">…</span>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 25">25</a>
                  </li>
                  <li>
                     <a class = "pagination-link is-current" aria-label = "Page 26" aria-current = "page">26</a>
                  </li>
                  <li>
                     <span class = "pagination-ellipsis">…</span>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 49">49</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 50">50</a>
                  </li>
               </ul>
            </nav>
            <br>
            <br>
            
            <span class = "is-size-5">
               Large Pagination
            </span>
            <br>
            <br>
            
            <nav class = "pagination is-centered is-large" role = "navigation" aria-label = "pagination">
               <a class = "pagination-previous">Previous</a>
               <a class = "pagination-next">Next</a>
               <ul class = "pagination-list">
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 1">1</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 2">2</a>
                  </li>
                  <li>
                     <span class = "pagination-ellipsis">…</span>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 25">25</a>
                  </li>
                  <li>
                     <a class = "pagination-link is-current" aria-label = "Page 26" aria-current = "page">26</a>
                  </li>
                  <li>
                     <span class = "pagination-ellipsis">…</span>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 49">49</a>
                  </li>
                  <li>
                     <a class = "pagination-link" aria-label = "Goto page 50">50</a>
                  </li>
               </ul>
            </nav>
         </div>
         
      </section>
   </body>
   
</html>

Next Topic : Click Here

This Post Has 2 Comments

Leave a Reply