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 =
< 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" >
GeeksforGeeks
</ 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