Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Bulma Hero

  • Last Updated : 09 Nov, 2021

Bulma is a free, 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 Hero is an imposing hero banner to showcase something.

The hero component allows you to add a full width banner to your webpage, which can optionally cover the full height of the page as well. Hero component includes several other component which we have to add exclusively to design our content well. These components are listed below.

  • hero: It is the main container.
  • hero-body: It is where you can put all your contents.

Example 1: This example illustrates plain Hero element.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Bulma Hero</title>
  <link rel='stylesheet' href=
 
  <!-- custom css -->
  <style>
    div.adjust {
      margin-top: 50px;
    }
  </style>
</head>
 
<body>
  <div class='container adjust'>
    <section class="hero">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            GeeksforGeeks
          </h1>
          <h2 class="subtitle">
            Prior knowledge of DS and Algo:
            If you are already well versed
            with the basic data structures
            like Arrays, Linked Lists etc.
            and some of the basic algorithms
            like Sorting, Searching etc. then
            you will comparatively take much
            less time than a complete newbie
            as you already know the basics.
          </h2>
        </div>
      </div>
    </section>
  </div>
</body>
 
</html>

Output:

Plain Hero Element

Example 2: This example illustrates colorful Hero Bulma elements.



HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Bulma Hero</title>
  <link rel='stylesheet' href=
 
  <!-- custom css -->
  <style>
    div.adjust {
      margin-top: 10px;
    }
 
    div.column.is-6 {
      padding: 2px;
    }
  </style>
</head>
 
<body>
  <div class='container adjust'>
    <div class='columns'>
      <div class='column is-6'>
        <section class="hero is-primary">
          <div class="hero-body">
            <div class="container">
              <h1 class="title">
                GeeksforGeeks
              </h1>
              <h2 class="subtitle">
                Prior knowledge of DS and
                Algo: If you are already
                well versed with the basic
                data structures like Arrays,
                Linked Lists etc.
              </h2>
            </div>
          </div>
        </section>
      </div>
 
      <div class='column is-6'>
        <section class="hero is-info">
          <div class="hero-body">
            <div class="container">
              <h1 class="title">
                GeeksforGeeks
              </h1>
              <h2 class="subtitle">
                Prior knowledge of DS and
                Algo: If you are already
                well versed with the basic
                data structures like Arrays,
                Linked Lists etc.
              </h2>
            </div>
          </div>
        </section>
      </div>
    </div>
 
    <div class='columns'>
      <div class='column is-6'>
        <section class="hero is-link">
          <div class="hero-body">
            <div class="container">
              <h1 class="title">
                GeeksforGeeks
              </h1>
              <h2 class="subtitle">
                Prior knowledge of DS and
                Algo: If you are already
                well versed with the basic
                data structures like Arrays,
                Linked Lists etc.
              </h2>
            </div>
          </div>
        </section>
      </div>
 
      <div class='column is-6'>
        <section class="hero is-success">
          <div class="hero-body">
            <div class="container">
              <h1 class="title">
                GeeksforGeeks
              </h1>
              <h2 class="subtitle">
                Prior knowledge of DS and
                Algo: If you are already
                well versed with the basic
                data structures like Arrays,
                Linked Lists etc.
              </h2>
            </div>
          </div>
        </section>
      </div>
    </div>
 
    <div class='columns'>
      <div class='column is-6'>
        <section class="hero is-warning">
          <div class="hero-body">
            <div class="container">
              <h1 class="title">
                GeeksforGeeks
              </h1>
              <h2 class="subtitle">
                Prior knowledge of DS and
                Algo: If you are already
                well versed with the basic
                data structures like Arrays,
                Linked Lists etc.
              </h2>
            </div>
          </div>
        </section>
      </div>
 
      <div class='column is-6'>
        <section class="hero is-danger">
          <div class="hero-body">
            <div class="container">
              <h1 class="title">
                GeeksforGeeks
              </h1>
              <h2 class="subtitle">
                Prior knowledge of DS and
                Algo: If you are already
                well versed with the basic
                data structures like Arrays,
                Linked Lists etc.
              </h2>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</body>
 
</html>

Output:

colorful bulma hero elements

Example 3: This example illustrates hero elements with gradient effect (Add is-bold modifier).

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Bulma Hero</title>
  <link rel='stylesheet' href=
 
  <!-- custom css -->
  <style>
    div.adjust {
      margin-top: 10px;
    }
 
    div.column.is-6 {
      padding: 2px;
    }
  </style>
</head>
 
<body>
  <div class='container adjust'>
    <div class='columns'>
      <div class='column is-6'>
        <section class="hero is-primary is-bold">
          <div class="hero-body">
            <div class="container">
              <h1 class="title">
                GeeksforGeeks
              </h1>
              <h2 class="subtitle">
                Prior knowledge of DS and Algo:
                If you are already well versed
                with the basic data structures
                like Arrays, Linked Lists etc.
              </h2>
            </div>
          </div>
        </section>
      </div>
 
      <div class='column is-6'>
        <section class="hero is-info is-bold">
          <div class="hero-body">
            <div class="container">
              <h1 class="title">
                GeeksforGeeks
              </h1>
              <h2 class="subtitle">
                Prior knowledge of DS and Algo:
                If you are already well versed
                with the basic data structures
                like Arrays, Linked Lists etc.
              </h2>
            </div>
          </div>
        </section>
      </div>
    </div>
 
    <div class='columns'>
      <div class='column is-6'>
        <section class="hero is-link is-bold">
          <div class="hero-body">
            <div class="container">
              <h1 class="title">
                GeeksforGeeks
              </h1>
              <h2 class="subtitle">
                Prior knowledge of DS and Algo:
                If you are already well versed
                with the basic data structures
                like Arrays, Linked Lists etc.
              </h2>
            </div>
          </div>
        </section>
      </div>
 
      <div class='column is-6'>
        <section class="hero is-success is-bold">
          <div class="hero-body">
            <div class="container">
              <h1 class="title">
                GeeksforGeeks
              </h1>
              <h2 class="subtitle">
                Prior knowledge of DS and Algo:
                If you are already well versed
                with the basic data structures
                like Arrays, Linked Lists etc.
              </h2>
            </div>
          </div>
        </section>
      </div>
    </div>
 
    <div class='columns'>
      <div class='column is-6'>
        <section class="hero is-warning is-bold">
          <div class="hero-body">
            <div class="container">
              <h1 class="title">
                GeeksforGeeks
              </h1>
              <h2 class="subtitle">
                Prior knowledge of DS and Algo:
                If you are already well versed
                with the basic data structures
                like Arrays, Linked Lists etc.
              </h2>
            </div>
          </div>
        </section>
      </div>
 
      <div class='column is-6'>
        <section class="hero is-danger  is-bold">
          <div class="hero-body">
            <div class="container">
              <h1 class="title">
                GeeksforGeeks
              </h1>
              <h2 class="subtitle">
                Prior knowledge of DS and Algo:
                If you are already well versed
                with the basic data structures
                like Arrays, Linked Lists etc.
              </h2>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</body>
 
</html>

Output:

Hero Element with gredient effect




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!