Bulma Fullheight hero in 3 parts
Bulma is an open-source CSS framework that makes it easier to develop responsive interfaces. It is based on flexbox. In this article, we will be seeing the three parts of the full-height hero.
The full-height hero takes up the whole height of the viewport. It can be split up into three parts: hero-head, hero-body and hero-foot.
Full Height Hero CSS classes:
- hero-head: This class is used to warp the head (top part) of the hero.
- hero-body: This class is used to wrap the body of the hero. The content is always vertically centred.
- hero-foot: This class is used to warp the foot (bottom part) of the hero.
Syntax:
<section class="hero is-link is-fullheight"> <!-- Hero head: At the top --> <div class="hero-head"> ... </div> <!-- Hero content: In the middle --> <div class="hero-body"> ... </div> <!-- Hero footer: At the bottom --> <div class="hero-foot"> ... </div> </section>
Example: The example below shows the use of the hero-head, hero-body, and the hero-foot classes provided by Bulma.
HTML
<!DOCTYPE html> < html > < head > < link rel = 'stylesheet' href = 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css' > < style > .hero{ margin-top: 25px; } .hero-body{ justify-content: center; } </ style > </ head > < body class = "has-text-centered" > < h1 class = "is-size-2 has-text-success" > w3wiki </ h1 > < b >Bulma Fullheight Hero 3 parts</ b > < div class = "container" > < section class = "hero is-link is-fullheight" > <!-- Hero head: At the top --> < div class = "hero-head" > < b class = "is-size-4" >Hero Head</ b > </ div > <!-- Hero content: In the middle --> < div class = "hero-body" > < b class = "is-size-3" >Hero Body</ b > </ div > <!-- Hero footer: At the bottom --> < div class = "hero-foot" > < b class = "is-size-4" >Hero Foot</ b > </ div > </ section > </ div > </ body > </ html > |
Output:
Reference: https://bulma.io/documentation/layout/hero/#fullheight-hero-in-3-parts