You are viewing the deprecated 0.8.1 version of the website. Click here to view the latest version

Hero

An imposing hero banner to showcase something

Colors Yes
Sizes Yes
Variables Yes

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.

Hero title

Hero subtitle

<section class="hero">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Hero title
      </h1>
      <h2 class="subtitle">
        Hero subtitle
      </h2>
    </div>
  </div>
</section>

Colors #

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

Primary title

Primary subtitle

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

Info title

Info subtitle

Success title

Success subtitle

Warning title

Warning subtitle

Danger title

Danger subtitle

Light title

Light subtitle

Dark title

Dark subtitle


Gradients #

By adding the is-bold modifier, you can generate a subtle gradient

Primary bold title

Primary bold subtitle

<section class="hero is-medium is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Primary bold title
      </h1>
      <h2 class="subtitle">
        Primary bold subtitle
      </h2>
    </div>
  </div>
</section>

Info bold title

Info bold subtitle

Success bold title

Success bold subtitle

Warning bold title

Warning bold subtitle

Danger bold title

Danger bold subtitle

Light bold title

Light bold subtitle

Dark bold title

Dark bold subtitle


Sizes #

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

  • medium
  • large
  • fullheight

Medium title

Medium subtitle

<section class="hero is-primary is-medium">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Medium title
      </h1>
      <h2 class="subtitle">
        Medium subtitle
      </h2>
    </div>
  </div>
</section>

Large title

Large subtitle

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

Fullheight title

Fullheight subtitle

<section class="hero is-success is-fullheight">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Fullheight title
      </h1>
      <h2 class="subtitle">
        Fullheight subtitle
      </h2>
    </div>
  </div>
</section>

Fullheight with navbar #

Since 0.7.2

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.

<section class="hero is-link is-fullheight-with-navbar">
  <div class="hero-body">
    <div class="container">
      <p class="title">
        Fullheight hero with navbar
      </p>
    </div>
  </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)
<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://versions.bulma.io/0.8.1/images/bulma-type-white.png" alt="Logo">
          </a>
          <span class="navbar-burger burger" data-target="navbarMenuHeroA">
            <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">
      <h1 class="title">
        Title
      </h1>
      <h2 class="subtitle">
        Subtitle
      </h2>
    </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>
<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://versions.bulma.io/0.8.1/images/bulma-type-white.png" alt="Logo">
          </a>
          <span class="navbar-burger burger" data-target="navbarMenuHeroB">
            <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>
<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://versions.bulma.io/0.8.1/images/bulma-type-white.png" alt="Logo">
          </a>
          <span class="navbar-burger burger" data-target="navbarMenuHeroC">
            <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">
      <h1 class="title">
        Title
      </h1>
      <h2 class="subtitle">
        Subtitle
      </h2>
    </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>

Variables #

Name Type Default value Computed value
Name Type Default value Computed value
$hero-body-padding size 3rem 1.5rem
$hero-body-padding-small size 1.5rem
$hero-body-padding-medium size 9rem 1.5rem
$hero-body-padding-large size 18rem 1.5rem

Made with Bulma
This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!