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 =
< 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" >
< div class = "hero-head" >
< b class = "is-size-4" >Hero Head</ b >
</ div >
< div class = "hero-body" >
< b class = "is-size-3" >Hero Body</ b >
</ div >
< div class = "hero-foot" >
< b class = "is-size-4" >Hero Foot</ b >
</ div >
</ section >
</ div >
</ body >
</ html >
|
Output:
Bulma Fullheight hero in 3 parts
Reference: https://bulma.io/documentation/layout/hero/#fullheight-hero-in-3-parts
Last Updated :
12 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...