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.
<!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:
Example 2: This example illustrates colorful Hero Bulma elements.
<!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:
Example 3: This example illustrates hero elements with gradient effect (Add is-bold modifier).
<!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: