Bulma Section Sizes
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 = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" > </ 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 = "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </ 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