Related Articles

Related Articles

Bulma Hero
  • Last Updated : 24 Aug, 2020

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2: This example illustrates colorful Hero Bulma elements.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :