Bulma is a free and open-source CSS framework based on flexbox which enables web developers to make beautiful and responsive websites for all screen sizes. In this article, we will be seeing the different sizes of the Hero component provided by Bulma. The Hero component is available in 5 different sizes: small, medium, large, halfheight, and fullheight.
Bulma Hero Size classes:
- is-small: This class is used to set the size of the hero component to small.
- is-medium: This class is used to set the size of the hero component to medium.
- is-large: This class is used to set the size of the hero component to large.
- is-halfheight: This class is used to set the size of the hero component to halfheight.
- is-fullheight: This class is used to set the size of the hero component to fullheight.
Syntax:
<section class="hero Size-class">
...
</section>Example: The example below illustrates the use of Bulma Hero size classes to set the size of the hero component.
HTML
<!DOCTYPE html> <html>
<head>
<link rel='stylesheet'
href=
<style>
.container>.hero {
margin-top: 25px;
}
.hero-body {
justify-content: center;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">Bulma Hero Sizes</b>
<div class="container">
<section class="hero is-small is-link">
<div class="hero-body">
<p class="title">
GeeksforGeeks
</p>
<p class="subtitle">
Small Hero
</p>
</div>
</section>
<section class="hero is-medium is-link">
<div class="hero-body">
<p class="title">
GeeksforGeeks
</p>
<p class="subtitle">
Medium Hero
</p>
</div>
</section>
<section class="hero is-large is-link">
<div class="hero-body">
<p class="title">
GeeksforGeeks
</p>
<p class="subtitle">
Large Hero
</p>
</div>
</section>
<section class="hero is-halfheight is-link">
<div class="hero-body">
<div>
<p class="title">
GeeksforGeeks
</p>
<p class="subtitle">
Half-height Hero
</p>
</div>
</div>
</section>
<section class="hero is-fullheight is-link">
<div class="hero-body">
<div>
<p class="title">
GeeksforGeeks
</p>
<p class="subtitle">
Full-Height Hero
</p>
</div>
</div>
</section>
</div>
</body>
</html>
|
Output:
Bulma Hero Sizes
Reference: https://bulma.io/documentation/layout/hero/#sizes