Bulma Hero
Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The Hero is an imposing hero banner to showcase something.
The hero component allows you to add a full width banner to your webpage, which can optionally cover the full height of the page as well. Hero component includes several other component which we have to add exclusively to design our content well. These components are listed below.
- hero: It is the main container.
- hero-body: It is where you can put all your contents.
Example 1: This example illustrates plain Hero element.
HTML
<!DOCTYPE html><html><head> <title>Bulma Hero</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.adjust { margin-top: 50px; } </style></head><body> <div class='container adjust'> <section class="hero"> <div class="hero-body"> <div class="container"> <h1 class="title"> GeeksforGeeks </h1> <h2 class="subtitle"> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. and some of the basic algorithms like Sorting, Searching etc. then you will comparatively take much less time than a complete newbie as you already know the basics. </h2> </div> </div> </section> </div></body></html> |
Output:
Plain Hero Element
Example 2: This example illustrates colorful Hero Bulma elements.
HTML
<!DOCTYPE html><html><head> <title>Bulma Hero</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.adjust { margin-top: 10px; } div.column.is-6 { padding: 2px; } </style></head><body> <div class='container adjust'> <div class='columns'> <div class='column is-6'> <section class="hero is-primary"> <div class="hero-body"> <div class="container"> <h1 class="title"> GeeksforGeeks </h1> <h2 class="subtitle"> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. </h2> </div> </div> </section> </div> <div class='column is-6'> <section class="hero is-info"> <div class="hero-body"> <div class="container"> <h1 class="title"> GeeksforGeeks </h1> <h2 class="subtitle"> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. </h2> </div> </div> </section> </div> </div> <div class='columns'> <div class='column is-6'> <section class="hero is-link"> <div class="hero-body"> <div class="container"> <h1 class="title"> GeeksforGeeks </h1> <h2 class="subtitle"> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. </h2> </div> </div> </section> </div> <div class='column is-6'> <section class="hero is-success"> <div class="hero-body"> <div class="container"> <h1 class="title"> GeeksforGeeks </h1> <h2 class="subtitle"> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. </h2> </div> </div> </section> </div> </div> <div class='columns'> <div class='column is-6'> <section class="hero is-warning"> <div class="hero-body"> <div class="container"> <h1 class="title"> GeeksforGeeks </h1> <h2 class="subtitle"> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. </h2> </div> </div> </section> </div> <div class='column is-6'> <section class="hero is-danger"> <div class="hero-body"> <div class="container"> <h1 class="title"> GeeksforGeeks </h1> <h2 class="subtitle"> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. </h2> </div> </div> </section> </div> </div> </div></body></html> |
Output:
colorful bulma hero elements
Example 3: This example illustrates hero elements with gradient effect (Add is-bold modifier).
HTML
<!DOCTYPE html><html><head> <title>Bulma Hero</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.adjust { margin-top: 10px; } div.column.is-6 { padding: 2px; } </style></head><body> <div class='container adjust'> <div class='columns'> <div class='column is-6'> <section class="hero is-primary is-bold"> <div class="hero-body"> <div class="container"> <h1 class="title"> GeeksforGeeks </h1> <h2 class="subtitle"> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. </h2> </div> </div> </section> </div> <div class='column is-6'> <section class="hero is-info is-bold"> <div class="hero-body"> <div class="container"> <h1 class="title"> GeeksforGeeks </h1> <h2 class="subtitle"> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. </h2> </div> </div> </section> </div> </div> <div class='columns'> <div class='column is-6'> <section class="hero is-link is-bold"> <div class="hero-body"> <div class="container"> <h1 class="title"> GeeksforGeeks </h1> <h2 class="subtitle"> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. </h2> </div> </div> </section> </div> <div class='column is-6'> <section class="hero is-success is-bold"> <div class="hero-body"> <div class="container"> <h1 class="title"> GeeksforGeeks </h1> <h2 class="subtitle"> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. </h2> </div> </div> </section> </div> </div> <div class='columns'> <div class='column is-6'> <section class="hero is-warning is-bold"> <div class="hero-body"> <div class="container"> <h1 class="title"> GeeksforGeeks </h1> <h2 class="subtitle"> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. </h2> </div> </div> </section> </div> <div class='column is-6'> <section class="hero is-danger is-bold"> <div class="hero-body"> <div class="container"> <h1 class="title"> GeeksforGeeks </h1> <h2 class="subtitle"> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. </h2> </div> </div> </section> </div> </div> </div></body></html> |
Output:
Hero Element with gradient effect
Please Login to comment...