Learn CSS with 🎓 online interactive courses,📺 educational videos, and 🧑🏻‍💻project-building tutorials.
Download

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

Route Planner and Route Optimizer

Hero

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.

The basic requirement of this component are:

  • hero as the main container
    • hero-body as a direct child, in which you can put all your content

For the fullheight hero to work, you will also need a hero-head and a hero-foot.

Example

Hero title

Hero subtitle

HTML 

<section class="hero">
  <div class="hero-body">
    <p class="title">Hero title</p>
    <p class="subtitle">Hero subtitle</p>
  </div>
</section>

Colors #

As with buttons, you can choose one of the 8 different colors:

Example

Link hero

Link subtitle

HTML 

<section class="hero is-link">
  <div class="hero-body">
    <p class="title">Link hero</p>
    <p class="subtitle">Link subtitle</p>
  </div>
</section>

Example

Primary hero

Primary subtitle

HTML 

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">Primary hero</p>
    <p class="subtitle">Primary subtitle</p>
  </div>
</section>

Example

Info hero

Info subtitle

HTML 

<section class="hero is-info">
  <div class="hero-body">
    <p class="title">Info hero</p>
    <p class="subtitle">Info subtitle</p>
  </div>
</section>

Example

Success hero

Success subtitle

HTML 

<section class="hero is-success">
  <div class="hero-body">
    <p class="title">Success hero</p>
    <p class="subtitle">Success subtitle</p>
  </div>
</section>

Example

Warning hero

Warning subtitle

HTML 

<section class="hero is-warning">
  <div class="hero-body">
    <p class="title">Warning hero</p>
    <p class="subtitle">Warning subtitle</p>
  </div>
</section>

Example

Danger hero

Danger subtitle

HTML 

<section class="hero is-danger">
  <div class="hero-body">
    <p class="title">Danger hero</p>
    <p class="subtitle">Danger subtitle</p>
  </div>
</section>

Sizes #

You can have even more imposing banners by using one of 5 different sizes:

  • is-small
  • is-medium
  • is-large
  • is-halfheight
  • is-fullheight

Example

Small hero

Small subtitle

HTML 

<section class="hero is-small is-primary">
  <div class="hero-body">
    <p class="title">Small hero</p>
    <p class="subtitle">Small subtitle</p>
  </div>
</section>

Example

Medium hero

Medium subtitle

HTML 

<section class="hero is-medium is-link">
  <div class="hero-body">
    <p class="title">Medium hero</p>
    <p class="subtitle">Medium subtitle</p>
  </div>
</section>

Example

Large hero

Large subtitle

HTML 

<section class="hero is-large is-info">
  <div class="hero-body">
    <p class="title">Large hero</p>
    <p class="subtitle">Large subtitle</p>
  </div>
</section>

Example

Half height hero

Half height subtitle

HTML 

<section class="hero is-success is-halfheight">
  <div class="hero-body">
    <div class="">
      <p class="title">Half height hero</p>
      <p class="subtitle">Half height subtitle</p>
    </div>
  </div>
</section>

Example

Fullheight hero

Fullheight subtitle

HTML 

<section class="hero is-danger is-fullheight">
  <div class="hero-body">
    <div class="">
      <p class="title">Fullheight hero</p>
      <p class="subtitle">Fullheight subtitle</p>
    </div>
  </div>
</section>

Fullheight with navbar #

If you are using a fixed navbar, you can use the is-fullheight-with-navbar modifier on the hero for it to occupy the viewport height minus the navbar height.

Example

Fullheight hero with navbar

HTML 

 <nav class="navbar">
  <div class="container">
    <div id="navMenu" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item">
          Home
        </a>
        <a class="navbar-item">
          Documentation
        </a>
      </div>

      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <a class="button is-dark">Github</a>
            <a class="button is-link">Download</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

<section class="hero is-link is-fullheight-with-navbar">
  <div class="hero-body">
    <p class="title">Fullheight hero with navbar</p>
  </div>
</section>

Fullheight hero in 3 parts #

To obtain a hero that will cover the whole height of the viewport, you can split it in 3 vertical parts:

  • hero
    • hero-head (always at the top)
    • hero-body (always vertically centered)
    • hero-foot (always at the bottom)

Example

Title

Subtitle

HTML 

<section class="hero is-primary is-medium">
  <!-- Hero head: will stick at the top -->
  <div class="hero-head">
    <nav class="navbar">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">
            <img src="https://bulma.io/assets/images/bulma-type-white.png" alt="Logo" />
          </a>
          <span class="navbar-burger" data-target="navbarMenuHeroA">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div id="navbarMenuHeroA" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item is-active"> Home </a>
            <a class="navbar-item"> Examples </a>
            <a class="navbar-item"> Documentation </a>
            <span class="navbar-item">
              <a class="button is-primary is-inverted">
                <span class="icon">
                  <i class="fab fa-github"></i>
                </span>
                <span>Download</span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </nav>
  </div>

  <!-- Hero content: will be in the middle -->
  <div class="hero-body">
    <div class="container has-text-centered">
      <p class="title">Title</p>
      <p class="subtitle">Subtitle</p>
    </div>
  </div>

  <!-- Hero footer: will stick at the bottom -->
  <div class="hero-foot">
    <nav class="tabs">
      <div class="container">
        <ul>
          <li class="is-active"><a>Overview</a></li>
          <li><a>Modifiers</a></li>
          <li><a>Grid</a></li>
          <li><a>Elements</a></li>
          <li><a>Components</a></li>
          <li><a>Layout</a></li>
        </ul>
      </div>
    </nav>
  </div>
</section>

Example

Title

Subtitle

HTML 

<section class="hero is-info is-large">
  <div class="hero-head">
    <nav class="navbar">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">
            <img src="https://bulma.io/assets/images/bulma-type-white.png" alt="Logo" />
          </a>
          <span class="navbar-burger" data-target="navbarMenuHeroB">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div id="navbarMenuHeroB" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item is-active"> Home </a>
            <a class="navbar-item"> Examples </a>
            <a class="navbar-item"> Documentation </a>
            <span class="navbar-item">
              <a class="button is-info is-inverted">
                <span class="icon">
                  <i class="fab fa-github"></i>
                </span>
                <span>Download</span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </nav>
  </div>

  <div class="hero-body">
    <div class="container has-text-centered">
      <p class="title">Title</p>
      <p class="subtitle">Subtitle</p>
    </div>
  </div>

  <div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
      <div class="container">
        <ul>
          <li class="is-active">
            <a>Overview</a>
          </li>
          <li>
            <a>Modifiers</a>
          </li>
          <li>
            <a>Grid</a>
          </li>
          <li>
            <a>Elements</a>
          </li>
          <li>
            <a>Components</a>
          </li>
          <li>
            <a>Layout</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</section>

Example

Logo

Title

Subtitle

HTML 

<section class="hero is-success is-fullheight">
  <!-- Hero head: will stick at the top -->
  <div class="hero-head">
    <header class="navbar">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">
            <img src="https://bulma.io/assets/images/bulma-type-white.png" alt="Logo" />
          </a>
          <span class="navbar-burger" data-target="navbarMenuHeroC">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div id="navbarMenuHeroC" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item is-active"> Home </a>
            <a class="navbar-item"> Examples </a>
            <a class="navbar-item"> Documentation </a>
            <span class="navbar-item">
              <a class="button is-success is-inverted">
                <span class="icon">
                  <i class="fab fa-github"></i>
                </span>
                <span>Download</span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </header>
  </div>

  <!-- Hero content: will be in the middle -->
  <div class="hero-body">
    <div class="container has-text-centered">
      <p class="title">Title</p>
      <p class="subtitle">Subtitle</p>
    </div>
  </div>

  <!-- Hero footer: will stick at the bottom -->
  <div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
      <div class="container">
        <ul>
          <li class="is-active"><a>Overview</a></li>
          <li><a>Modifiers</a></li>
          <li><a>Grid</a></li>
          <li><a>Elements</a></li>
          <li><a>Components</a></li>
          <li><a>Layout</a></li>
        </ul>
      </div>
    </nav>
  </div>
</section>

Sass and CSS variables #

Sass Variable
CSS Variable
Value 
$hero-body-padding
 
var(--bulma-hero-body-padding)
 
3rem 1.5rem
 
$hero-body-padding-tablet
 
var(--bulma-hero-body-padding-tablet)
 
3rem 3rem
 
$hero-body-padding-small
 
var(--bulma-hero-body-padding-small)
 
1.5rem
 
$hero-body-padding-medium
 
var(--bulma-hero-body-padding-medium)
 
9rem 4.5rem
 
$hero-body-padding-large
 
var(--bulma-hero-body-padding-large)
 
18rem 6rem
 
$hero-gradient-h-offset
 
var(--bulma-hero-gradient-h-offset)
 
5deg
 
$hero-gradient-s-offset
 
var(--bulma-hero-gradient-s-offset)
 
10%
 
$hero-gradient-l-offset
 
var(--bulma-hero-gradient-l-offset:)
 
5%

How to support Bulma

One-time donation

Browser testing via

Visit our Sponsors

Monthly donation

Become a sponsor
#native_company# #native_desc#
#native_cta#
Get started for Free
Get started for Free