Open In App

Bulma File Colors

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

Bulma is an open-source CSS framework based on flexbox that can be used to make your web development faster as it comes with pre-built components and elements. In this article, we will be seeing how to change the Bulma File Colors using the color modifier classes provided by Bulma. You can use any one of the following classes.

Bulma File Color Classes:

  • is-black: This class is used to set the File color to the black color.
  • is-white: This class is used to set the File color to the white color.
  • is-link: This class is used to set the File color to the link color of the current theme.
  • is-light: This class is used to set the File color to the light color of the current theme.
  • is-success: This class is used to set the File color to the success color of the current theme.
  • is-warning: This class is used to set the File color to the warning color of the current theme.
  • is-danger: This class is used to set the File color to the danger color of the current theme.
  • is-dark: This class is used to set the File color to the dark color of the current theme.
  • is-primary: This class is used to set the File color to the primary color of the current theme.
  • is-info: This class is used to set the File color to the info color of the current theme.

Syntax:

<div class="file File-Color-Classes">
    ...
</div>

Example: The below example shows how to use the given classes to change the color of the file in Bulma.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel='stylesheet' 
          href='
https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" 
     />
    <style>
        .file{
            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 File Colors</b>
    <div class="container">
  
        <!-- Link Colored File -->
        <div class="file has-name 
                    is-centered 
                    is-link">
            <label class="file-label">
                <input class="file-input" 
                       type="file" 
                       name="selected-image">
                <span class="file-cta">
                    <span class="file-icon">
                        <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                        Link Colored File
                    </span>
                </span>
                <span class="file-name">
                    No Image Selected.
                </span>
            </label>
        </div>
  
        <!-- Black Colored File -->
        <div class="file has-name 
                    is-centered 
                    is-black">
            <label class="file-label">
                <input class="file-input" 
                       type="file" 
                       name="selected-image">
                <span class="file-cta">
                    <span class="file-icon">
                        <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                        Black Colored File
                    </span>
                </span>
                <span class="file-name">
                    No Image Selected.
                </span>
            </label>
        </div>
  
        <!-- Danger Colored file -->
        <div class="file has-name 
                    is-centered 
                    is-danger">
            <label class="file-label">
                <input class="file-input" 
                       type="file" 
                       name="selected-image">
                <span class="file-cta">
                    <span class="file-icon">
                        <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                        Danger Colored File
                    </span>
                </span>
                <span class="file-name">
                    No Image Selected.
                </span>
            </label>
        </div>
  
        <!-- Info Colored File -->
        <div class="file has-name is-centered is-info">
            <label class="file-label">
                <input class="file-input" 
                       type="file" name="selected-image">
                <span class="file-cta">
                    <span class="file-icon">
                        <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                        Info Colored File
                    </span>
                </span>
                <span class="file-name">
                    No Image Selected.
                </span>
            </label>
        </div>
  
        <!-- Primary Colored File -->
        <div class="file has-name is-centered is-primary">
            <label class="file-label">
                <input class="file-input" 
                       type="file"
                       name="selected-image">
                <span class="file-cta">
                    <span class="file-icon">
                        <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                        Primary Colored File
                    </span>
                </span>
                <span class="file-name">
                    No Image Selected.
                </span>
            </label>
        </div>
    </div>
</body>
  
</html>
 






                        










Output:


Bulma File Colors
Bulma File Colors


Example2: The below example shows the different colors of files with different file modifiers.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <link rel='stylesheet' 


          href= 


'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 


    <link rel="stylesheet" 


          href= 


"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> 


  


    <style> 


        .file{ 


            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 File Colors</b> 


    <div class="container"> 


  


        <!-- Boxed with name | Link Colored File -->


        <div class="file has-name 


                    is-boxed  


                    is-centered is-link"> 


            <label class="file-label"> 


                <input class="file-input" 


                       type="file" 


                       name="selected-image"> 


                <span class="file-cta"> 


                    <span class="file-icon"> 


                        <i class="fas fa-upload"></i> 


                    </span> 


                    <span class="file-label"> 


                        Link Colored File 


                    </span> 


                </span> 


                <span class="file-name"> 


                    No Image Selected. 


                </span> 


            </label> 


        </div> 


  


        <!-- Boxed with no name |  Black Colored File -->


        <div class="file is-boxed is-centered is-black"> 


            <label class="file-label"> 


                <input class="file-input" 


                       type="file" 


                       name="selected-image"> 


                <span class="file-cta"> 


                    <span class="file-icon"> 


                        <i class="fas fa-upload"></i> 


                    </span> 


                    <span class="file-label"> 


                        Black Colored File 


                    </span> 


                </span> 


            </label> 


        </div> 


  


        <!-- Normal with name | Danger Colored file -->


        <div class="file has-name is-centered is-danger"> 


            <label class="file-label"> 


                <input class="file-input" 


                       type="file" 


                       name="selected-image"> 


                <span class="file-cta"> 


                    <span class="file-icon"> 


                        <i class="fas fa-upload"></i> 


                    </span> 


                    <span class="file-label"> 


                        Danger Colored File 


                    </span> 


                </span> 


                <span class="file-name"> 


                    No Image Selected. 


                </span> 


            </label> 


        </div> 


  


        <!-- Normal Without name | Info Colored File -->


        <div class="file is-centered is-info"> 


            <label class="file-label"> 


                <input class="file-input" 


                       type="file" 


                       name="selected-image"> 


                <span class="file-cta"> 


                    <span class="file-icon"> 


                        <i class="fas fa-upload"></i> 


                    </span> 


                    <span class="file-label"> 


                        Info Colored File 


                    </span> 


                </span> 


            </label> 


        </div> 


  


        <!-- Right Aligned | Primary Colored File -->


        <div class="file has-name  


                    is-justify-content-center 


                    is-right is-primary"> 


            <label class="file-label"> 


                <input class="file-input" 


                       type="file" 


                       name="selected-image"> 


                <span class="file-cta"> 


                    <span class="file-icon"> 


                        <i class="fas fa-upload"></i> 


                    </span> 


                    <span class="file-label"> 


                        Primary Colored File 


                    </span> 


                </span> 


                <span class="file-name"> 


                    No Image Selected. 


                </span> 


            </label> 


        </div> 


    </div> 


</body> 


  


</html> 



















                        







                        










Output:


Bulma File Colors
Bulma File Colors


Reference: https://bulma.io/documentation/form/file/#colors


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bulma Overflow Touch
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Foundation CSS Button Clear Style
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                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
            

        
    
        
            

                Bulma Button Colors
            

        
    
        
            

                Bulma Textarea Colors
            

        
    
        
            

                Bulma Icon 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