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.
<!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" >
< span class = "icon-text" >
< span >Practice</ span >
</ span >
</ a >
< br />
< span class = "icon-text" >
< span >Blogs</ span >
</ span >
</ a >
< br />
< 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" >
< span class = "icon-text" >
< span >Email</ span >
</ span >
</ a >
< br />
< span class = "icon-text" >
< span >Call Us</ span >
</ span >
</ a >
< br />
< 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/