Open In App

Bulma Navbar Colors

Last Updated : 30 Jan, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a modern CSS framework based on flexbox. It has its own pre-styled components which make it easier to create responsive and beautiful websites. In this article, we will be seeing how to change navbar color in Bulma using any one of the 9 color modifier classes provided by Bulma.

Navbar Color Classes:

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

Syntax:

<nav class="navbar is-link">
  ...
</nav>

Example: The below example shows how to change the background color of the navbar using the color modifier classes discussed above.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Navbar Colors</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
  
    <style>
        .navbar {
            margin-top: 20px;
            padding: 10px;
            border-radius: 10px;
        }
    </style>
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <b>Bulma Navbar Colors</b>
    <div class="container">
          
        <!-- Danger Background -->
        <nav class="navbar is-danger">
            <div class="navbar-brand">
                <a class="navbar-item" 
                   href="https://geeksforgeeks.org">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152-200x101.png">
                </a>
                <div class="navbar-burger" 
                     data-target="navBackgroundDemo1">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
  
            <div id="navBackgroundDemo1" 
                 class="navbar-menu">
                <div class="navbar-start">
                    <a class="navbar-item" 
                       href="#">
                        Home
                    </a>
                    <a class="navbar-item" 
                       href="#">
                        Courses
                    </a>
  
                </div>
  
                <div class="navbar-end">
                    <div class="navbar-item">
                        <div class="field is-grouped">
                            <p class="control">
                                <button class="button is-primary">
                                    Algorithms
                                </button>
                            </p>
  
                            <p class="control">
                                <button class="button is-primary is-outlined">
                                    Data Structures
                                </button>
                            </p>
  
                        </div>
                    </div>
                </div>
            </div>
        </nav>
  
  
        <!-- Link Background -->
        <nav class="navbar is-link">
            <div class="navbar-brand">
                <a class="navbar-item"
                   href="https://geeksforgeeks.org">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152-200x101.png">
                </a>
                <div class="navbar-burger" 
                     data-target="navBackgroundDemo1">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
  
            <div id="navBackgroundDemo1" 
                 class="navbar-menu">
                <div class="navbar-start">
                    <a class="navbar-item" 
                       href="#">
                        Home
                    </a>
                    <a class="navbar-item" 
                       href="#">
                        Courses
                    </a>
                </div>
  
                <div class="navbar-end">
                    <div class="navbar-item">
                        <div class="field is-grouped">
                            <p class="control">
                                <button class="button is-primary">
                                    Algorithms
                                </button>
                            </p>
  
                            <p class="control">
                                <button class="button is-white">
                                    Data Structures
                                </button>
                            </p>
  
                        </div>
                    </div>
                </div>
            </div>
        </nav>
  
        <!-- Info Background -->
        <nav class="navbar is-info">
            <div class="navbar-brand">
                <a class="navbar-item" 
                   href="https://geeksforgeeks.org">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152-200x101.png">
                </a>
                <div class="navbar-burger" 
                     data-target="navBackgroundDemo1">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
  
            <div id="navBackgroundDemo1" 
                 class="navbar-menu">
                <div class="navbar-start">
                    <a class="navbar-item" 
                       href="#">
                        Home
                    </a>
                    <a class="navbar-item" 
                       href="#">
                        Courses
                    </a>
  
                </div>
  
                <div class="navbar-end">
                    <div class="navbar-item">
                        <div class="field is-grouped">
                            <p class="control">
                                <button class="button is-primary">
                                    Algorithms
                                </button>
                            </p>
  
                            <p class="control">
                                <button class="button is-white">
                                    Data Structures
                                </button>
                            </p>
  
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</body>
</html>
 






                        










Output:




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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bulma Hero Colors
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bulma Navbar start and navbar end
            

        
    
        
            

                Bulma Transparent Navbar
            

        
    
        
            

                Bulma Fixed navbar
            

        
    
        
            

                Bulma Hero Fullheight with Navbar
            

        
    
        
            

                Bulma Navbar
            

        
    
        
            

                Bulma Navbar Burger
            

        
    
        
            

                Bulma Navbar Brand
            

        
    
        
            

                Bulma Navbar Helper Classes
            

        
    
        
            

                Bulma Basic Navbar
            

        
    
        
            

                Bulma Navbar Item
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
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