Open In App

Bulma Panel Colors

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

Bulma is a CSS framework based on flexbox. It makes it easier and faster to make websites using its pre-styled components. In this article, we will be seeing the various colors with which the panel component can be styled in Bulma.

Panel Color Classes:

  • is-primary: This class is used to change the color of the panel to the primary color.
  • is-link: This class is used to change the color of the panel to the link color.
  • is-info: This class is used to change the color of the panel to the info color.
  • is-success: This class is used to change the color of the panel to the success color.
  • is-warning: This class is used to change the color of the panel to the warning color.
  • is-danger: This class is used to change the color of the panel to the danger color.
  • is-black: This class is used to change the color of the panel to the black color.
  • is-dark: This class is used to change the color of the panel to a dark color.
  • is-light: This class is used to change the color of the panel to a light color.
  • is-white: This class is used to change the color of the panel to the white color.

Syntax:

<nav class="panel is-primary">
    ...
</nav>

Example: The below example shows how to change the color of the panel using the classes listed above.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Bulma Panel Colors
    </title>
  
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
  
    <style>
        .container {
            display: flex;
            align-items: center;
            flex-direction: column;
        }
  
        .panel {
            max-width: 400px;
            margin-top: 25px;
        }
    </style>
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
  
    <b class="is-size-4">
        Bulma Panel Colors
    </b>
  
    <div class="container">
        <!-- Primary Color -->
        <nav class="panel is-primary">
            <p class="panel-heading">
                Primary Color Panel
            </p>
  
  
            <p class="panel-tabs">
                <a class="is-active">All</a>
                <a>Data Structures</a>
                <a>Algorithms</a>
                <a>DBMS</a>
                <a>C++</a>
            </p>
  
            <a class="panel-block is-active">
                <span class="panel-icon">
                    <i class="fas fa-book" 
                        aria-hidden="true">
                    </i>
                </span>
                How to generate triangle pattern in C++?
            </a>
  
            <a class="panel-block">
                <span class="panel-icon">
                    <i class="fas fa-book" 
                        aria-hidden="true">
                    </i>
                </span>
                Tree Data Structure
            </a>
  
            <a class="panel-block">
                <span class="panel-icon">
                    <i class="fas fa-book" 
                        aria-hidden="true">
                    </i>
                </span>
                What is a foreign key in SQL?
            </a>
        </nav>
  
        <!-- Link Color -->
        <nav class="panel is-link">
            <p class="panel-heading">
                Link Color Panel
            </p>
  
            <p class="panel-tabs">
                <a class="is-active">All</a>
                <a>Data Structures</a>
                <a>Algorithms</a>
                <a>DBMS</a>
                <a>C++</a>
            </p>
  
            <a class="panel-block is-active">
                <span class="panel-icon">
                    <i class="fas fa-book" 
                        aria-hidden="true">
                    </i>
                </span>
                How to generate triangle pattern in C++?
            </a>
  
            <a class="panel-block">
                <span class="panel-icon">
                    <i class="fas fa-book" 
                        aria-hidden="true">
                    </i>
                </span>
                Tree Data Structure
            </a>
  
            <a class="panel-block">
                <span class="panel-icon">
                    <i class="fas fa-book" 
                        aria-hidden="true">
                    </i>
                </span>
                What is a foreign key in SQL?
            </a>
        </nav>
  
        <!-- Danger Color -->
        <nav class="panel is-danger">
            <p class="panel-heading">
                Danger Color Panel
            </p>
  
            <p class="panel-tabs">
                <a class="is-active">All</a>
                <a>Data Structures</a>
                <a>Algorithms</a>
                <a>DBMS</a>
                <a>C++</a>
            </p>
  
            <a class="panel-block is-active">
                <span class="panel-icon">
                    <i class="fas fa-book" 
                        aria-hidden="true">
                    </i>
                </span>
                How to generate triangle pattern in C++?
            </a>
  
            <a class="panel-block">
                <span class="panel-icon">
                    <i class="fas fa-book" 
                        aria-hidden="true">
                    </i>
                </span>
                Tree Data Structure
            </a>
  
            <a class="panel-block">
                <span class="panel-icon">
                    <i class="fas fa-book" 
                        aria-hidden="true"></i>
                </span>
                What is a foreign key in SQL?
            </a>
        </nav>
    </div>
</body>
  
</html> 






                        










Output:




Reference: https://bulma.io/documentation/components/panel/#colors


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bulma Message Colors
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bulma Radio
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                jQuery Mobile panel classes.panel Option
            

        
    
        
            

                Bulma Panel Variables
            

        
    
        
            

                Bulma | Panel
            

        
    
        
            

                React.js Blueprint Colors Core colors
            

        
    
        
            

                How to Change the Label Colors or the Legend Colors in a Chart ?
            

        
    
        
            

                Bulma Notification Colors
            

        
    
        
            

                Bulma Notification Light colors
            

        
    
        
            

                Bulma Message Colors
            

        
    
        
            

                Bulma Hero Colors
            

        
    
        
            

                Bulma Select Colors
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
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