Bulma | Message

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Message</title>
  
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
  
  <!-- FontAwesome Library -->
  <script src=
  </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>

chevron_right


Output:



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

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Message</title>
  
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
  
  <!-- FontAwesome Library -->
  <script src=
  </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>

chevron_right


Output:

Example 3:

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Message</title>
  
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
  
  <!-- FontAwesome Library -->
  <script src=
  </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>

chevron_right


Output:

Example 4:

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Message</title>
  
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
  
  <!-- FontAwesome Library -->
  <script src=
  </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>

chevron_right


Output:



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

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Message</title>
  
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
  
  <!-- FontAwesome Library -->
  <script src=
  </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>

chevron_right


Output:

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

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Message</title>
  
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
  
  <!-- FontAwesome Library -->
  <script src=
  </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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.