Bulma Pagination Styles

Last Updated : 30 Jan, 2022

Bulma is a free and open-source CSS framework based on flexbox which enables web developers to make beautiful and responsive websites for all screen sizes. In this article, we will be seeing the styles of the pagination component in Bulma.

Bulma pagination component has only one style variation which can be applied by appending an is-rounded modifier on the pagination component.

Bulma Pagination Style Class:

is-rounded: This class is used to make the pagination items rounded.

Syntax:

<nav class="pagination is-rounded">
     ....
</nav>

Example: The below example shows how to use is-rounded modifier on the pagination component to make the pagination items rounded.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel='stylesheet'
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
  
    <style> 
        .container>p { 
            margin-top: 60px; 
            font-weight: bold; 
        } 
        .container>p:first-child { 
            margin-top: 30px; 
        } 
    </style> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-2 has-text-success"> 
      GeeksforGeeks 
    </h1> 
    <p class="is-size-4"> 
      <b>Bulma Pagination Styles</b> 
    </p> 
  
    <div class="container is-fluid"> 
        <p>Simple Pagination Style:</p> 
  
        <nav class="pagination" role="navigation"> 
            <a class="pagination-previous is-disabled"
               title="Tou are on the first page."> 
              Previous 
            </a> 
            <a class="pagination-next">Next</a> 
            <ul class="pagination-list"> 
                <li> 
                    <a class="pagination-link is-current"
                       title="Page 1">1</a> 
                </li> 
                <li> 
                    <a class="pagination-link" 
                       title="Page 2">2</a> 
                </li> 
                <li> 
                    <a class="pagination-link"
                       title="Page 3">3</a> 
                </li> 
            </ul> 
        </nav> 
  
        <p>Rounded Pagination Style:</p> 
        <nav class="pagination is-rounded" 
             role="navigation"> 
            <a class="pagination-previous is-disabled" 
               title="Tou are on the first page."> 
              Previous 
            </a> 
            <a class="pagination-next">Next</a> 
            <ul class="pagination-list"> 
                <li> 
                    <a class="pagination-link is-current" 
                       title="Page 1">1</a> 
                </li> 
                <li> 
                    <a class="pagination-link"
                       title="Page 2">2</a> 
                </li> 
                <li> 
                    <a class="pagination-link"
                       title="Page 3">3</a> 
                </li> 
            </ul> 
        </nav> 
    </div> 
</body> 
  
</html>