Bulma Footer
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 = 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css' > </ 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" >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 > <!-- Body or Main content --> < div class = "container content" > < h1 >Welcome to GFG</ h1 > < p > A Computer Science portal for Beginner. 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 © Beginner</ 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"> w3wiki </ h4 > <!-- footer content --> < p class="bd-footer-link has-text-left"> w3wiki is a web portal for Beginner 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/