Open In App

Bulma Footer

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free and open-source framework based on flexbox property used to build reusable components while building web applications. This framework is a mobile-ready framework with which the users can see the web applications as like a mobile application.

Footer in Bulma is used to attract the users to the website and also provides the important links, about the company, contact us pages link, etc. In Bulma, Footer is responsive which means it will change the UI as per the different devices and can include anything like columns, lists, buttons, icons, etc.

Bulma footer class:

  • footer: This class is used to add a footer to your web application.

Syntax:

<footer class="footer">
    ....
</footer>

Below example illustrate the Bulma Footer:

Example: Below example illustrates the Bulma footer for a webpage.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma footer</title>
    <link rel='stylesheet' 
          href=
</head>
  
<body class="has-text-centered">
      
  <!-- 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">GeeksforGeeks</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>
  
<!-- Body or Main content -->
  <div class="container content">
    <h1>Welcome to GFG</h1>
    <p>
      A Computer Science portal for geeks. 
      It provides you the well written, 
      well expressed and easy explained CS courses, 
      articles, and programming challenges, etc.
    </p>
  
    <h2>Here! What you get</h2>
    <p>
      Free Tutorials, Millions of Articles, Live,
      Online and Classroom Courses, Frequent Coding 
      Competitions ,Webinars by Industry Experts, 
      Internship opportunities and Job Opportunities.
    </p>
  
    <ul>
      <li>Competitive Programming</li>
      <li>Interview Preparation.</li>
      <li>Coding Challeneges, etc</li>
    </ul>
  </div>
  
    <!--   footer starts from here  -->
  <footer class="footer">
        <!-- Copyright symbol of company -->
      <div class="content has-text-centered">
        <p>Copyright © Geeks</p>
  
      </div>
  
  <!-- Three columns created using columns class of Bulma -->
  <div class="columns">
      <!-- Column 1 -->
    <div class="column">
  
      <!-- Heading is left aligned, medium weight -->
      <h4 class="bd-footer-title 
                 has-text-weight-medium
                 has-text-left">
        GeeksforGeeks
      </h4>
  
      <!-- footer content -->
      <p class="bd-footer-link 
                has-text-left">
        GeeksforGeeks is a web portal for 
        geeks who wants to learn about
        Computer Science and want to see 
        Tutorials, Articles, etc.
      </p>
  
    </div>
  
    <!-- Column 2 -->
    <div class="column">
      <h4 class="bd-footer-title 
                 has-text-weight-medium 
                 has-text-justify">
        Explore
      </h4>
  
      <!-- Column 2 lists with links -->
      <p class="bd-footer-link">
         <a href="https://">
          <span class="icon-text">
            <span>Practice</span>
          </span>
         </a>
          <br />
          <a href="https://">
              <span class="icon-text">
                <span>Blogs</span>
              </span>
            </a>
          <br />
          <a href="https://">
              <span class="icon-text">
                <span>Careers</span>
              </span>
          </a>
      </p>
  
    </div>
  
    <!-- Column 3 -->
    <div class="column">
      <h4 class="bd-footer-title
                 has-text-weight-medium
                 has-text-justify">
        Contact us
      </h4>
  
      <!-- Column 3 lists with links -->
      <p class="bd-footer-link">
          <a href="https://">
              <span class="icon-text">
                <span>Email</span>
              </span>
            </a>
          <br />
          <a href="https://">
              <span class="icon-text">
                <span>Call Us</span>
              </span>
            </a>
          <br />
          <a href="https://">
              <span class="icon-text">
                <span>Chat with us!</span>
              </span>
            </a>
      </p>
  
    </div>
  </div>
</footer>
</body>
</html>


Output:

Reference: https://bulma.io/documentation/layout/footer/



Last Updated : 30 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads