Open In App

Bulma | Message

Last Updated : 01 Jul, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

The Message component in Bulma provides colored box type placeholders to emphasize certain parts of the page. It includes several other components that can be added to design the content. These components are listed below:

  • message-header: It holds the title of the message and delete element. It is an optional component.
  • message-body: It holds the body of the message.

Example 1: This example shows creating a simple message using Bulma.

html




<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Message</title>
  
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
  
  <!-- FontAwesome Library -->
  <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
  </script>
  
  <!-- Custom CSS -->
  <style>
    div.columns {
      margin-top: 70px;
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-4'>
        <article class="message">
          <div class="message-header">
            <p>GeeksforGeeks</p>
            <button class="delete" 
                aria-label="delete">
            </button>
          </div>
          <div class="message-body">
            <strong>'GeeksforGeeks'</strong> is
            a computer science portal.it was
            created with a goal in mind to
            provide well written, well thought
            and well explained solutions for
            selected questions. The core team
            of five super geeks constituting
            of technology lovers and computer
            science enthusiasts have been
            constantly working in this direction.
          </div>
        </article>
      </div>
    </div>
  </div>
</body>
  
</html> 






                        










Output:




Example 2: This example shows creating different color message components using Bulma.




html














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


  <title>Bulma Message</title> 


  


  <!-- Include Bulma CSS -->


  <link rel='stylesheet' href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


  


  <!-- FontAwesome Library -->


  <script src= 


'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> 


  </script> 


  


  <!-- Custom CSS -->


  <style> 


    div.columns { 


      margin-top: 70px; 


    } 


  </style> 


</head> 


  


<body> 


  <div class='container has-text-centered'> 


    <div class='columns is-mobile is-centered'> 


      <div class='column is-4'> 


        <article class="message is-primary"> 


          <div class="message-header"> 


  


            <p>GeeksforGeeks</p> 


  


            <button class="delete" aria-label="delete"> 


            </button> 


          </div> 


          <div class="message-body"> 


            <strong>'GeeksforGeeks'</strong> is a 


            computer science portal.it was created 


            with a goal in mind to provide well 


            written, well thought and well explained 


            solutions for selected questions. The 


            core team of five super geeks 


            constituting of technology lovers and 


            computer science enthusiasts have been 


            constantly working in this direction. 


          </div> 


        </article> 


      </div> 


      <div class="column is-4"> 


        <article class="message is-info"> 


          <div class="message-header"> 


  


            <p>GeeksforGeeks</p> 


  


            <button class="delete" 


              aria-label="delete"> 


            </button> 


          </div> 


          <div class="message-body"> 


            <strong>'GeeksforGeeks'</strong> is a  


            computer science portal.it was created  


            with a goal in mind to provide well  


            written, well thought and well explained  


            solutions for selected questions. The  


            core team of five super geeks constituting  


            of technology lovers and computer science  


            enthusiasts have been constantly working 


            in this direction. 


          </div> 


        </article> 


      </div> 


    </div> 


  </div> 


</body> 


  


</html> 



















                        







                        










Output:




Example 3:




html














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


  <title>Bulma Message</title> 


  


  <!-- Include Bulma CSS -->


  <link rel='stylesheet' href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


  


  <!-- FontAwesome Library -->


  <script src= 


'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> 


  </script> 


  


  <!-- Custom CSS -->


  <style> 


    div.columns { 


      margin-top: 70px; 


    } 


  </style> 


</head> 


  


<body> 


  <div class='container has-text-centered'> 


    <div class='columns is-mobile is-centered'> 


      <div class='column is-4'> 


        <article class="message is-link"> 


          <div class="message-header"> 


  


            <p>GeeksforGeeks</p> 


  


            <button class="delete" aria-label="delete"> 


            </button> 


          </div> 


          <div class="message-body"> 


            <strong>'GeeksforGeeks'</strong> is a 


            computer science portal.it was created with 


            a goal in mind to provide well written, 


            well thought and well explained solutions 


            for selected questions. The core team 


            of five super geeks constituting of 


            technology lovers and computer science 


            enthusiasts have been constantly working 


            in this direction . 


          </div> 


        </article> 


      </div> 


      <div class="column is-4"> 


        <article class="message is-success"> 


          <div class="message-header"> 


            <p>GeeksforGeeks</p> 


            <button class="delete" 


              aria-label="delete"> 


            </button> 


          </div> 


          <div class="message-body"> 


            <strong>'GeeksforGeeks'</strong> is a 


            computer science portal.it was created with 


            a goal in mind to provide well written, 


            well thought and well explained solutions 


            for selected questions. The core team 


            of five super geeks constituting of 


            technology lovers and computer science 


            enthusiasts have been constantly working 


            in this direction . 


          </div> 


        </article> 


      </div> 


    </div> 


  </div> 


</body> 


  


</html> 



















                        







                        










Output:




Example 4:




html














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


  <title>Bulma Message</title> 


  


  <!-- Include Bulma CSS -->


  <link rel='stylesheet' href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


  


  <!-- FontAwesome Library -->


  <script src= 


'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> 


  </script> 


  


  <!-- Custom CSS -->


  <style> 


    div.columns { 


      margin-top: 70px; 


    } 


  </style> 


</head> 


  


<body> 


  <div class='container has-text-centered'> 


    <div class='columns is-mobile is-centered'> 


      <div class='column is-4'> 


        <article class="message is-warning"> 


          <div class="message-header"> 


  


            <p>GeeksforGeeks</p> 


  


            <button class="delete" aria-label="delete"> 


            </button> 


          </div> 


          <div class="message-body"> 


            <strong>'GeeksforGeeks'</strong> is a 


            computer science portal.it was created with 


            a goal in mind to provide well written, 


            well thought and well explained solutions 


            for selected questions. The core team 


            of five super geeks constituting of 


            technology lovers and computer science 


            enthusiasts have been constantly working 


            in this direction . 


          </div> 


        </article> 


      </div> 


      <div class="column is-4"> 


        <article class="message is-danger"> 


          <div class="message-header"> 


  


            <p>GeeksforGeeks</p> 


  


            <button class="delete" aria-label="delete"> 


            </button> 


          </div> 


          <div class="message-body"> 


            <strong>'GeeksforGeeks'</strong> is a 


            computer science portal.it was created with 


            a goal in mind to provide well written, 


            well thought and well explained solutions 


            for selected questions. The core team 


            of five super geeks constituting of 


            technology lovers and computer science 


            enthusiasts have been constantly working 


            in this direction . 


          </div> 


        </article> 


      </div> 


    </div> 


  </div> 


</body> 


  


</html> 



















                        







                        










Output:




Example 5: This example shows creating different sized message components using Bulma.




html














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


  <title>Bulma Message</title> 


  


  <!-- Include Bulma CSS -->


  <link rel='stylesheet' href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


  


  <!-- FontAwesome Library -->


  <script src= 


'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> 


  </script> 


  


  <!-- Custom CSS -->


  <style> 


    div.columns { 


      margin-top: 50px; 


    } 


  </style> 


</head> 


  


<body> 


  <div class='container has-text-centered'> 


    <div class='columns is-mobile is-centered'> 


      <div class='column is-4'> 


        <article class="message is-primary"> 


          <div class="message-header"> 


  


            <p>GeeksforGeeks</p> 


  


            <button class="delete" 


              aria-label="delete"> 


            </button> 


          </div> 


          <div class="message-body"> 


            <strong>'GeeksforGeeks'</strong> is a 


            computer science portal.it was created with 


            a goal in mind to provide well written, 


            well thought and well explained solutions 


            for selected questions. The core team 


            of five super geeks constituting of 


            technology lovers and computer science 


            enthusiasts have been constantly working 


            in this direction . 


          </div> 


        </article> 


      </div> 


  


      <div class="column is-4"> 


        <article class="message is-medium is-info"> 


          <div class="message-header"> 


  


            <p>GeeksforGeeks</p> 


  


            <button class="delete" 


              aria-label="delete"> 


            </button> 


          </div> 


          <div class="message-body"> 


            <strong>'GeeksforGeeks'</strong> is a 


            computer science portal.it was created with 


            a goal in mind to provide well written, 


            well thought and well explained solutions 


            for selected questions. The core team 


            of five super geeks constituting of 


            technology lovers and computer science 


            enthusiasts have been constantly working 


            in this direction . 


          </div> 


        </article> 


      </div> 


  


      <div class="column is-4"> 


        <article class="message is-large is-success"> 


          <div class="message-header"> 


  


            <p>GeeksforGeeks</p> 


  


            <button class="delete" 


              aria-label="delete"> 


            </button> 


          </div> 


          <div class="message-body"> 


            <strong>'GeeksforGeeks'</strong> is a 


            computer science portal.it was created with 


            a goal in mind to provide well written, 


            well thought and well explained solutions 


            for selected questions. The core team 


            of five super geeks constituting of 


            technology lovers and computer science 


            enthusiasts have been constantly working 


            in this direction . 


          </div> 


        </article> 


      </div> 


    </div> 


  </div> 


</body> 


  


</html> 



















                        







                        










Output:




Example 6: This example creating message components without header using Bulma.




html














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


  <title>Bulma Message</title> 


  


  <!-- Include Bulma CSS -->


  <link rel='stylesheet' href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


  


  <!-- FontAwesome Library -->


  <script src= 


'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> 


  </script> 


  


  <!-- Custom CSS -->


  <style> 


    div.columns { 


      margin-top: 50px; 


    } 


  </style> 


</head> 


  


<body> 


  <div class='container has-text-centered'> 


    <div class='columns is-mobile is-centered'> 


      <div class='column is-4'> 


        <article class="message is-link"> 


          <div class="message-body"> 


            <strong>'GeeksforGeeks'</strong> is a 


            computer science portal.it was created with 


            a goal in mind to provide well written, 


            well thought and well explained solutions 


            for selected questions. The core team 


            of five super geeks constituting of 


            technology lovers and computer science 


            enthusiasts have been constantly working 


            in this direction . 


          </div> 


        </article> 


      </div> 


  


      <div class="column is-4"> 


        <article class="message is-success"> 


          <div class="message-body"> 


            <strong>'GeeksforGeeks'</strong> is a 


            computer science portal.it was created with 


            a goal in mind to provide well written, 


            well thought and well explained solutions 


            for selected questions. The core team 


            of five super geeks constituting of 


            technology lovers and computer science 


            enthusiasts have been constantly working 


            in this direction . 


          </div> 


        </article> 


      </div> 


    </div> 


  </div> 


</body> 


  


</html> 



















                        







                        










Output:




                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bulma Menu
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bulma | Modal
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                React Suite Message <Message> Props
            

        
    
        
            

                Bulma Message Colors
            

        
    
        
            

                Bulma Message Body
            

        
    
        
            

                Bulma Message Sizes
            

        
    
        
            

                Bulma Message Variables
            

        
    
        
            

                Semantic-UI Message Positive / Success Variation
            

        
    
        
            

                Semantic-UI Message Info Variation
            

        
    
        
            

                How to pass express errors message to Angular view ?
            

        
    
        
            

                Click() method not working and Console returns an error message in JavaScript
            

        
    
        
            

                JavaScript Error message Property
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        hunter__js                                

                            

                            

            
                                

                            

                                                                    

                                        
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