In this article, we’ll be seeing the Bulma section. A Section is a basic container that is used to divide the webpage content into different sections.
Bulma Section class:
- section- This class of Bulma is used to divide the webpage into different sections and has less padding.
- section is-medium- This class of Bulma is used to divide the webpage into different sections in a medium size.
- section is-large- This class of Bulma is used to divide the webpage into different sections in a large size.
Syntax:
<section class="section ||
section is-medium ||
section is-large">
......
</section>
Example 1: Below example illustrates the section in Bulma.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< section class = "section has-background-primary" >
< h1 class = "title" >
GeeksforGeeks
</ h1 >
< h2 class = "subtitle" >
This is a Bulma
< strong >section</ strong >
used for dividing the content
into various sections.
</ h2 >
</ section >
</ body >
</ html >
|
Output:
Example 2: Below example illustrates the two sizes of the section class in Bulma.
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 >
< 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-danger">
< h1 class = "title" >Large size 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:
Reference: https://bulma.io/documentation/layout/section/
Last Updated :
03 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...