Bulma - Hero banner

Description

Bulma provides hero banner to specify the full width banner to the webpage. Bulma uses hero class as container and hero-body as child, where you can add your page content.

Let's create a simple example of hero banner by using hero class as shown below −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Hero Banner Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Simple Hero Banner
            </span>
            <br>
            <br>
            
            <section class = "hero is-info">
               <div class = "hero-body">
                  <div class = "container">
                     <h1 class = "title">
                        Tutorialspoint (Main title)
                     </h1>
                     <h2 class = "subtitle">
                        Online Learning (Subtitle)
                     </h2>
                  </div>
               </div>
            </section>
            
         </div>
      </section>
   </body>
   
</html>

It displays the below output −

Gradients

Bulma allows creating transitions between two or more colors, which are used to fill a specified region by using is-bold modifier.

Let's create a simple example for gradients by using is-bold modifier as shown below −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Hero Banner Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Gradients
            </span>
            <br>
            <br>
            
            <section class = "hero is-warning is-bold">
               <div class = "hero-body">
                  <div class = "container">
                     <h1 class = "title">Tutorialspoint (Main title)</h1>
                     <h2 class = "subtitle">Online Learning (Subtitle)</h2>
                  </div>
               </div>
            </section>
            
         </div>
      </section>
   </body>
   
</html>

It displays the below output −

Full Height Hero

The full height hero banner contains 3 vertical parts −

hero-head − It specifies top part of the hero banner.
hero-body − It specifies body part of the hero banner, which is vertically centered.
hero-foot − It specifies bottom part of the hero banner.

The below example specifies usage of above 3 parts of full height hero as shown below −

Note − Resize the coding-ground output window to see the changes occurring according to window size.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Hero Banner Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Full Height Hero
            </span>
            <br>
            <br>
            
            <section class = "hero is-primary is-medium">
               <!-- Hero head at the top -->
               <div class = "hero-head">
                  <nav class = "navbar">
                     <div class = "container">
                        <div class = "navbar-brand">
                           <a class = "navbar-item">
                              <img alt="tutorialspoint" src = "https://www.tutorialspoint.com/bootstrap/images/logo.png" height = "300" width = "200">
                           </a>
                           <span class = "navbar-burger burger" data-target = "navbarmenu">
                              <span></span>
                              <span></span>
                              <span></span>
                           </span>
                        </div>
                        
                        <div id = "navbarmenu" class = "navbar-menu">
                           <div class = "navbar-end">
                              <a class = "navbar-item is-active">Home</a>
                              <a class = "navbar-item">AboutUs</a>
                              <a class = "navbar-item">Services</a>
                           </div>
                        </div>
                        
                     </div>
                  </nav>
               </div>
               
               <!-- Hero content in the middle -->
               <div class = "hero-body">
                  <div class = "container has-text-centered">
                     <h1 class = "title">Tutorialspoint (Main title)</h1>
                     <h2 class = "subtitle">Online Learning (Subtitle)</h2>
                  </div>
               </div>
               
               <!-- Hero footer at the bottom -->
               <div class = "hero-foot is-info">
                  <nav class = "tabs">
                     <div class = "container">
                        <ul>
                           <li class = "is-active"><a>Help</a></li>
                           <li><a>FAQ's</a></li>
                           <li><a>Privacy</a></li>
                           <li><a>Feedback</a></li>
                           <li><a>Terms</a></li>
                        </ul>
                     </div>
                  </nav>
               </div>
               
            </section>
         </div>
      </section>
      
   </body>
</html>

It displays the below output −

You can also display the full height hero as large and fullwidth by using is-large and is-fullheight classes. Use these classes by replacing is-medium class in the section tag.

bulma_layout.htm