Open In App

Bulma Pagination Sizes

Last Updated : 10 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free and open-source CSS framework used to make beautiful and responsive websites. The Bulma pagination component comes in four different sizes: small, default, medium, and large. Pagination size can be set using 3 CSS classes on the pagination component provided by Bulma.

Pagination Size Classes:

  • is-small: This class is used to set the pagination size to small.
  • is-medium: This class is used to set the medium size to medium.
  • is-large: This class is used to set the pagination size to large.

Syntax:

<nav class="pagination is-large" role="navigation">
    Content
</nav>

Example: The below example shows how to use pagination size classes in Bulma.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
  
    <title>Bulma Pagination Sizes</title>
  
    <style>
        h1,
        p {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1 class="is-size-2 has-text-success">
            GeeksforGeeks
        </h1>
        <p><b>Bulma Pagination Sizes</b></p>
        <nav class="pagination is-small" role="navigation">
            <a class="pagination-previous is-disabled" 
                title="You 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>
        <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>
  
        <nav class="pagination is-medium" 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>
  
        <nav class="pagination is-large" 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> 






                        










Output:


Bulma Pagination Sizes


Reference: https://bulma.io/documentation/components/pagination/#sizes


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bulma Pagination Styles
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bulma Button Sizes
            

        
    
        
            

                Bulma Delete Sizes
            

        
    
        
            

                Bulma Content Sizes
            

        
    
        
            

                Bulma Icon Sizes
            

        
    
        
            

                Bulma Textarea Sizes
            

        
    
        
            

                Bulma Input Sizes
            

        
    
        
            

                Bulma Select Sizes
            

        
    
        
            

                Bulma Tabs Sizes
            

        
    
        
            

                Bulma Tags Sizes
            

        
    
        
            

                Bulma Title Sizes
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        vpsop                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox