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 full height 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>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
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
You can have even more imposing banners by using one of 3 different sizes:
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>
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">
<div class="hero-body">
<div class="container">
<h1 class="title">
Fullheight hero with navbar
</h1>
</div>
</div>
</section>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.7.2/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>Title
Subtitle
<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.7.2/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.7.2/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>
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub
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.
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.
