In this article, we’ll be seeing the Bulma section sizes. In Bulma, there are two types of sizes available that divide the webpage content into different sections with different spacing/paddings.
Bulma Section Sizes class:
- is-medium- This class of Bulma is used to divide the webpage content into different sections in a medium spacing.
- is-large- This class of Bulma is used to divide the webpage content into different sections in a large spacing.
Syntax:
// For medium spacing <section class="section is-medium"> ... </section> // For Large spacing <section class="section is-large"> ... </section>
Example: Below example illustrates the Bulma is-medium and is-large sections.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< section class="section is-medium
has-background-info">
< h1 class = "title" >
GFG Medium section
</ h1 >
< h2 class = "subtitle" >
This is a Bulma
< strong >Medium section</ strong >
used for dividing the content into
various sections.
</ h2 >
</ section >
< section class="section is-large
has-background-success">
< h1 class = "title" >
GFG Large section
</ h1 >
< h2 class = "subtitle" >
This is a Bulma
< strong >Large section</ strong >
used for dividing the content
into various sections.
</ h2 >
</ section >
</ body >
</ html >
|
Output:
Example 2: Another example for demonstrating Bulma Section Sizes.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< link
rel = "stylesheet" href =
</ head >
< body >
< section class="section is-medium
has-background-warning">
< h1 class = "title" >
Medium size section
</ h1 >
< div class = "columns p-4" >
< div class="column has-text-white
has-background-primary p-4">
Java
</ div >
< div class="column has-text-white
has-background-info p-4">
C++
</ div >
< div class="column has-text-white
has-background-danger p-4">
Python
</ div >
< div class="column has-text-dark
has-background-light p-4">
C#
</ div >
</ div >
</ section >
< section class="section is-large
has-background-danger">
< h1 class = "title" >
Large size section
</ h1 >
< div class = "columns p-4" >
< div class="column has-text-white
has-background-primary p-4">
Java
</ div >
< div class="column has-text-white
has-background-info p-4">
C++
</ div >
< div class="column has-text-dark
has-background-warning p-4">
Python
</ div >
< div class="column has-text-dark
has-background-light p-4">
C#
</ div >
</ div >
</ section >
</ body >
</ html >
|
Output:
Reference: https://bulma.io/documentation/layout/section/#sizes