Bulma | Pagination

Bulma | pagination component consists of the following elements:

The pagination-previous & pagination-next modifier classes are used for previous and next page visits.
The pagination-list is used to display the page list. Basically, it is a container for page items.
The pagination-link modifier class is used to provide page number.
The pagination-ellipsis modifier class is used for range separators.

Example

General Syntax

      
        <nav class="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">

    <li>
      <a class="pagination-link">Paginated link</a>
    </li>
    
  </ul>
</nav>

Try it now

Source Code

Download

          
            <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 1">2</a>
    </li>

     <li>
      <a class="pagination-link" aria-label="Goto page 1">3</a>
    </li>
   
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    
  </ul>
</nav>

Try it now

Source Code : Output

Pagination: Alignment

By default, pagination is aligned in the left direction but you can align it in the right direction using the is-right modifier class. To align it into the center, use is-centered modifier class.

Example

General Syntax

      
        <nav class="pagination is-centered">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">

    <li>
      <a class="pagination-link">Paginated link</a>
    </li>
    
  </ul>
</nav>

Try it now

Source Code

Download

          
            <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 1">2</a>
    </li>

     <li>
      <a class="pagination-link" aria-label="Goto page 1">3</a>
    </li>
   
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    
  </ul>
</nav>

Try it now

Source Code : Output

Pagination: Right Alignment

Example

General Syntax

      
        <nav class="pagination is-right">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li>
      <a class="pagination-link">Paginated link</a>
    </li>    
  </ul>
</nav>

Try it now

Source Code

Download

          
            <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 1">2</a>
    </li>

     <li>
      <a class="pagination-link" aria-label="Goto page 1">3</a>
    </li>
   
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    
  </ul>
</nav>

Try it now

Source Code : Output

Rounded Paginated Items

To create a pagination item, use the is-rounded modifier class.

Example

General Syntax

      
        <nav class="pagination is-rounded">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">

    <li>
      <a class="pagination-link">Paginated link</a>
    </li>
    
  </ul>
</nav>

Try it now

Source Code

Download

          
            <nav class="pagination is-rounded" 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 1">2</a>
    </li>

     <li>
      <a class="pagination-link" aria-label="Goto page 1">3</a>
    </li>
   
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    
  </ul>
</nav>

Try it now

Source Code : Output

Pagination Size

Basically, pagination comes in 3 additional sizes. Use the following modifier class such as is-small, is-medium, is-large to create pagination's small size, medium size and large size correspondingly.

Example

General Syntax

      
        <nav class="pagination is-small" role="navigation" aria-label="pagination"></nav>

Try it now

Source Code

Download

          
            <nav class="pagination is-small" 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><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 3">3</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 4" aria-current="page">4</a></li>
    <li><a class="pagination-link" aria-label="Goto page 5">5</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 10">10</a></li>
  </ul>
</nav>

Try it now

Source Code : Output

Pagination: Medium Size

Example

General Syntax

      
        <nav class="pagination is-medium" role="navigation" aria-label="pagination"></nav>

Try it now

Source Code

Download

          
            <nav class="pagination is-medium" 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><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 3">3</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 4" aria-current="page">4</a></li>
    <li><a class="pagination-link" aria-label="Goto page 5">5</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 10">10</a></li>
  </ul>
</nav>

Try it now

Source Code : Output

Pagination: Large Size

Example

General Syntax

      
        <nav class="pagination is-large" "></nav>

Try it now

Source Code

Download

          
            <nav class="pagination is-large" 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><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 3">3</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 4" aria-current="page">4</a></li>
    <li><a class="pagination-link" aria-label="Goto page 5">5</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 10">10</a></li>
  </ul>
</nav>

Try it now

Source Code : Output

Bulma | Pagination

Example

Pagination: Alignment

Example

Pagination: Right Alignment

Example

Rounded Paginated Items

Example

Pagination Size

Example

Pagination: Medium Size

Example

Pagination: Large Size

Example

Web Tutorials