Bulma - Hero banner | Adglob Infosystem Pvt Ltd

In this guide, we will discuss Hero Banner in Bulma.

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 −

<!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">
                        Adglob (Main title)
                     </h1>
                     <h2 class = "subtitle">
                        Online Learning (Subtitle)
                     </h2>
                  </div>
               </div>
            </section>
            
         </div>
      </section>
   </body>
   
</html>

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 −

<!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">Adglob (Main title)</h1>
                     <h2 class = "subtitle">Online Learning (Subtitle)</h2>
                  </div>
               </div>
            </section>
            
         </div>
      </section>
   </body>
   
</html>

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.

<!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="Adglob" src = "https://adglob.in/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">Adglob (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>

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.

Next Topic : Click Here