Bulma Message

Bulma message component is generally used to emphasize the part of the web page content.It uses followings predefined modifier class such as is-dark,is-primary,is-link,is-info,is-success,is-warning,is-danger.That is very helpful to change the background color of the message box.

Message components has followings sub components:

  • The message container.
  • The optional message-header that can hold a title and a delete element
  • The message-body,that is used for longer text message.

General Syntax

      
        <article class="message">
  <div class="message-header">
    <p>Header Info</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">Message body section content</div>
</article>      
    
Try it now

Source Code

          
            <article class="message">
  <div class="message-header">
    <p>Learn Web Development </p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    sudhakarinfotech provides web development tutorials from basic.User can learn HTML5,CSS3,JS,Jquery,ajax,JSON,PHP & MySQL very easily.
  </div>
</article>          
        
Try it now

Source Code : Output

Learn Web Development

sudhakarinfotech provides web development tutorials from basic.User can learn HTML5,CSS3,JS,Jquery,ajax,JSON,PHP & MySQL very easily.
Web Tutorials
Bulma Message
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4