Open In App

Bulma Fullheight hero in 3 parts

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Bulma Fullheight hero in 3 parts

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
Previous
Next
Share your thoughts in the comments
Similar Reads