Bulma CSS Tutorial
Bulma Message
Previous Page
Next Page

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

Download 
          
            <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
Tutorials HTML JAVASCRIPT CSS BOOTSTRAP 5
Performance Evalution HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
Practical Approach Coaching Software Computer Software Skill Management Software School Management Software