Bulma Message

The Message component in Bulma is a flexible container for displaying important information, alerts, warnings, and notifications to users. It provides a consistent way to communicate status messages with optional headers and dismiss buttons.

Basic Message Structure

A minimal message consists of a .message container with a .message-body:

<!-- Basic message -->
<article class="message">
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</article>

Message with Header

Add a header section using .message-header:

<!-- Message with header -->
<article class="message">
  <div class="message-header">
    <p>Message Title</p>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</article>

Message Colors

Bulma provides contextual color modifiers for different message types:

<!-- Primary message -->
<article class="message is-primary">

<!-- Success message -->
<article class="message is-success">

<!-- Danger/Error message -->
<article class="message is-danger">

<!-- Warning message -->
<article class="message is-warning">

<!-- Info message -->
<article class="message is-info">

<!-- Dark message -->
<article class="message is-dark">

<!-- Light message -->
<article class="message is-light">

Color Examples

Dismissible Messages

Add a delete button to make messages dismissible:

<!-- Dismissible message -->
<article class="message is-warning">
  <div class="message-header">
    <p>Warning</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    This message can be dismissed by clicking the X button.
  </div>
</article>

<!-- Small dismissible message -->
<article class="message is-success">
  <div class="message-body">
    Success! Operation completed.
    <button class="delete is-small" aria-label="delete"></button>
  </div>
</article>

JavaScript for Dismissal

<!-- HTML -->
<article class="message is-warning" id="dismissible-message">
  <div class="message-header">
    <p>Dismiss Me</p>
    <button class="delete" aria-label="delete" data-dismiss="message"></button>
  </div>
  <div class="message-body">
    Click the X to dismiss this message.
  </div>
</article>

<!-- JavaScript -->
<script>
document.addEventListener('click', event => {
  if (event.target.hasAttribute('data-dismiss')) {
    event.target.closest('.message').remove();
  }
});
</script>

Message Sizes

Control message size with size modifiers:

<!-- Small message -->
<article class="message is-small is-primary">

<!-- Normal message (default) -->
<article class="message is-primary">

<!-- Medium message -->
<article class="message is-medium is-primary">

<!-- Large message -->
<article class="message is-large is-primary">

Message with Icons

Enhance messages with icons for better visual communication:

<!-- Message with icon in header -->
<article class="message is-info">
  <div class="message-header">
    <p>
      <span class="icon mr-2">
        <i class="fas fa-info-circle"></i>
      </span>
      Information
    </p>
  </div>
  <div class="message-body">
    Here's some important information for you.
  </div>
</article>

<!-- Icon in message body -->
<article class="message is-success">
  <div class="message-body">
    <span class="icon has-text-success mr-2">
      <i class="fas fa-check-circle"></i>
    </span>
    Your changes have been saved successfully.
  </div>
</article>

Message Layout Options

Compact Messages

<!-- Compact message without header -->
<article class="message is-compact is-info">
  <div class="message-body">
    Compact information message.
  </div>
</article>

Bordered Messages

<!-- Message with border only -->
<article class="message is-bordered is-warning">
  <div class="message-body">
    Warning message with border styling.
  </div>
</article>

Messages in Columns

<!-- Multiple messages in grid -->
<div class="columns is-multiline">
  <div class="column is-half">
    <article class="message is-success">
      <div class="message-body">Success 1</div>
    </article>
  </div>
  <div class="column is-half">
    <article class="message is-warning">
      <div class="message-body">Warning 1</div>
    </article>
  </div>
</div>

Practical Message Examples

Form Validation Messages

<!-- Form with validation messages -->
<form>
  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" placeholder="Enter your email">
    </div>
  </div>
  
  <!-- Success message -->
  <article class="message is-success is-hidden" id="success-message">
    <div class="message-body">
      Form submitted successfully!
    </div>
  </article>
  
  <!-- Error message -->
  <article class="message is-danger is-hidden" id="error-message">
    <div class="message-body">
      Please fix the errors above.
    </div>
  </article>
  
  <button class="button is-primary">Submit</button>
</form>

System Notification Center

<div class="notification-center">
  <h4 class="title is-4">Notifications</h4>
  
  <!-- Unread notifications -->
  <article class="message is-info">
    <div class="message-header">
      <p>New Message</p>
      <span class="tag is-danger is-rounded ml-2">New</span>
      <button class="delete" aria-label="delete"></button>
    </div>
    <div class="message-body">
      You have received a new message from John Doe.
    </div>
  </article>
  
  <!-- System alert -->
  <article class="message is-warning">
    <div class="message-header">
      <p>System Maintenance</p>
      <button class="delete" aria-label="delete"></button>
    </div>
    <div class="message-body">
      Scheduled maintenance on Saturday, 2 AM - 4 AM UTC.
    </div>
  </article>
  
  <!-- Success notification -->
  <article class="message is-success">
    <div class="message-header">
      <p>Payment Successful</p>
      <button class="delete" aria-label="delete"></button>
    </div>
    <div class="message-body">
      Your payment of $49.99 has been processed.
    </div>
  </article>
</div>

API Response Messages

<!-- Loading state -->
<article class="message is-info" id="loading-message">
  <div class="message-body">
    <span class="icon">
      <i class="fas fa-spinner fa-pulse"></i>
    </span>
    Loading data, please wait...
  </div>
</article>

<!-- Success response -->
<article class="message is-success is-hidden" id="success-response">
  <div class="message-header">
    <p>Success</p>
    <button class="delete" aria-label="delete" data-dismiss="response"></button>
  </div>
  <div class="message-body">
    Data loaded successfully. Found 25 records.
  </div>
</article>

<!-- Error response -->
<article class="message is-danger is-hidden" id="error-response">
  <div class="message-header">
    <p>Error</p>
    <button class="delete" aria-label="delete" data-dismiss="response"></button>
  </div>
  <div class="message-body">
    Failed to load data. Please try again later.
  </div>
</article>

CSS Variables for Customization

Best Practices

• Use appropriate colors for message types (success=green, error=red)
• Always provide a way to dismiss non-critical messages
• Keep message text concise and actionable
• Use icons to reinforce the message type
• Consider using aria-live for screen reader announcements
• Implement auto-dismiss for temporary success messages
• Group related messages together
• Test color contrast for accessibility compliance

Up next: Bulma Modal Component