You can split the hero in 3 vertical parts:
-
hero
hero-head
(always at the top)hero-body
(always vertically centered)hero-foot
(always at the bottom)
You are viewing the deprecated 0.5.0 version of the website. Click here to view the latest version
Documentation
Everything you need to create a website with Bulma
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
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
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>
Full Height title
Full Height subtitle
<section class="hero is-success is-fullheight">
<div class="hero-body">
<div class="container">
<h1 class="title">
Full Height title
</h1>
<h2 class="subtitle">
Full Height subtitle
</h2>
</div>
</div>
</section>
You can split the hero in 3 vertical parts:
hero
hero-head
(always at the top)hero-body
(always vertically centered)hero-foot
(always at the bottom)Title
Subtitle
<section class="hero is-primary is-medium">
<!-- Hero header: will stick at the top -->
<div class="hero-head">
<header class="nav">
<div class="container">
<div class="nav-left">
<a class="nav-item">
<img src="images/bulma-type-white.png" alt="Logo">
</a>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item is-active">
Home
</a>
<a class="nav-item">
Examples
</a>
<a class="nav-item">
Documentation
</a>
<span class="nav-item">
<a class="button is-primary is-inverted">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>Download</span>
</a>
</span>
</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">
<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">
<!-- Hero header: will stick at the top -->
<div class="hero-head">
<header class="nav">
<div class="container">
<div class="nav-left">
<a class="nav-item">
<img src="images/bulma-type-white.png" alt="Logo">
</a>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item is-active">
Home
</a>
<a class="nav-item">
Examples
</a>
<a class="nav-item">
Documentation
</a>
<span class="nav-item">
<a class="button is-info is-inverted">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>Download</span>
</a>
</span>
</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>
Title
Subtitle
<section class="hero is-success is-fullheight">
<!-- Hero header: will stick at the top -->
<div class="hero-head">
<header class="nav">
<div class="container">
<div class="nav-left">
<a class="nav-item">
<img src="images/bulma-type-white.png" alt="Logo">
</a>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item is-active">
Home
</a>
<a class="nav-item">
Examples
</a>
<a class="nav-item">
Documentation
</a>
<span class="nav-item">
<a class="button is-success is-inverted">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>Download</span>
</a>
</span>
</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
Bulma Partners
Check out their products!