Categories
28°C, New York
Home Bulma Bulma Hero Fullheight with Navbar

Bulma Hero Fullheight with Navbar

Bulma Fullheight hero in 3 parts

In this article, we’ll be seeing Bulma Hero having Fullheight with Navbar. For using the navbar with the Hero component, we can use is-fullheight-with-navbar class.

Bulma Hero Fullheight with navbar class:

  • is-fullheight-with-navbar- This class or modifier is used to include the navbar within the Hero section by reducing some space from the viewport.

Syntax:

<nav class="navbar">
    ...
</nav>

<section class="hero is-fullheight-with-navbar">
    ...
</section>

Example 1:

HTML




<!DOCTYPE html>
  
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/>
</head>
  
<body>
    <nav class="navbar" role="navigation" 
        aria-label="main navigation">
  
      <div class="navbar-brand">
        <a class="navbar-item 
          has-background-success" href="#">
          <h1 class="has-text-white">
            w3wiki
          </h1>
        </a>
      
        <a role="button" class="navbar-burger" 
           aria-label="menu" aria-expanded="false" 
           data-target="navbarBasicExample">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      
      <div id="navbarBasicExample" 
           class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item">
            Home
          </a>
      
          <a class="navbar-item">
            Blogs
          </a>
      
          <div class="navbar-item has-dropdown 
              is-hoverable">
            <a class="navbar-link">
              More
            </a>
      
            <div class="navbar-dropdown">
              <a class="navbar-item">
                About us
              </a>
  
              <a class="navbar-item">
                Tutorials
              </a>
  
              <a class="navbar-item">
                Practice
              </a>
            </div>
          </div>
        </div>
      
        <div class="navbar-end">
          <div class="navbar-item">
            <div class="buttons">
              <a class="button is-success">
                <strong>Sign up</strong>
              </a>
                
              <a class="button is-light">
                Log in
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  
    <section class="hero is-fullheight-with-navbar 
      is-dark">
      <div class="hero-body content columns">
        <h1 class="title column">
          Welcome to w3wiki
        </h1> 
  
        <p class="subtitle column">
          This is Fullheight hero 
          with navbar that uses
          <code>
            is-fullheight-with-navbar
          </code> 
          class.
        </p>
  
      </div>
    </section>
</body>
  
</html>
 






                        









													
													
												

												
												

													
													
Output:

													
													
												

												
												

													
													

													
													
												

												
												

													
													
Example 2:

													
													
												

												
												

													
													




HTML















                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


  <head> 


    <link rel="stylesheet" href= 


"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/> 


  </head> 


  


  <body> 


    <!-- Header including navbar -->


    <nav class="navbar" role="navigation" 


        aria-label="main navigation"> 


      <div class="navbar-brand"> 


        <a class="navbar-item  


          has-background-success" href="#"> 


          <h1 class="has-text-white"> 


            w3wiki 


          </h1> 


        </a> 


  


        <a role="button" class="navbar-burger"


          aria-label="menu" aria-expanded="false"


          data-target="navbarBasicExample"> 


          <span aria-hidden="true"></span> 


          <span aria-hidden="true"></span> 


          <span aria-hidden="true"></span> 


        </a> 


      </div> 


  


      <div id="navbarBasicExample" class="navbar-menu"> 


        <div class="navbar-start"> 


          <a class="navbar-item"> 


            Home 


          </a> 


  


          <a class="navbar-item"> 


            Blogs 


          </a> 


  


          <div class="navbar-item has-dropdown  


              is-hoverable"> 


            <a class="navbar-link"> 


              More 


            </a> 


  


            <div class="navbar-dropdown"> 


              <a class="navbar-item"> 


                About us  


              </a> 


  


              <a class="navbar-item"> 


                Tutorials 


              </a> 


  


              <a class="navbar-item">  


                Practice 


              </a> 


            </div> 


          </div> 


        </div> 


  


        <div class="navbar-end"> 


          <div class="navbar-item"> 


            <div class="buttons"> 


              <a class="button is-success"> 


                <strong>Sign up</strong> 


              </a> 


  


              <a class="button is-light"> 


                Log in 


              </a> 


            </div> 


          </div> 


        </div> 


      </div> 


    </nav> 


  


    <section class="hero is-fullheight-with-navbar  


       is-light columns"> 


      <div class="hero-body column"> 


        <h1 class="title column"> 


          Learn Programming Languages 


        </h1> 


  


        <div class="rows"> 


          <div class="row has-text-white  


            has-background-primary p-4"> 


            Java 


          </div> 


  


          <div class="row has-text-white  


            has-background-info p-4"> 


            C++ 


          </div> 


  


          <div class="row has-text-dark  


            has-background-warning p-4"> 


            Python 


          </div> 


  


          <div class="row has-text-light  


            has-background-dark p-4"> 


            C# 


          </div> 


        </div> 


      </div> 


    </section> 


  </body> 


  


</html>



















                        







                        









													
													
												

												
												

													
													
Output:

													
													
												

												
												

													
													

													
													
												

												
												

													
													
Reference:  https://bulma.io/documentation/layout/hero/#fullheight-with-navbar

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
													
											

											
										

									

									

										
										
Tags:

										
										#Bulma
										
										#Bulma-Layout
										
										#CSS
										
										#Web Technologies
										
										

									

									

										

											
										

										

											
											
												Bulma Fullheight hero in 3 parts