Open In App
Related Articles

Bulma Block

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Bulma is a free, open-source CSS framework based on Flexbox. It is used to create beautiful responsive websites using this framework. In this article, we will discuss the block class in Bulma.

Block is the spacer element that is used to provide a consistent margin between sibling elements. It is used when we want to place content in blocks and want to give space between each block. So using this, we can easily provide a margin between the elements.

Bulma Block Class:

  • block: This class is used to place the content in the blocks and provide space between them. If there are multiple blocks then we can easily place our content with the help of this class.

Syntax:

<div class="block">
    <!-- Some content -->
</div>

Example 1:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel='stylesheet' href=
</head>
  
<body>
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <b class="is-size-4">Bulma Block </b>
    <div class="block">
        <strong> GeeksforGeeks block 1</strong>
        A Computer Science portal for geeks.
        It contains well written, well
        thought and well explained computer
        science and programming articles.
    </div>
    <div class="block">
        <strong> GeeksforGeeks block 2</strong>
        A Computer Science portal for geeks.
        It contains well written, well
        thought and well explained computer
        science and programming articles.
    </div>
    <div class="block">
        <strong> GeeksforGeeks block 3</strong>
        A Computer Science portal for geeks.
        It contains well written, well
        thought and well explained computer
        science and programming articles.
    </div>
</body>
  
</html>

                    

Output:

Bulma Block

Bulma Block

Example 2:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel='stylesheet' href=
</head>
  
<body>
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
  
    <b class="is-size-4">Bulma Block </b>
      
    <div class="block">
        <input class="" type="text" placeholder="First name">
        <input class="" type="text" placeholder="Middle name">
        <input class="" type="text" placeholder="Last name">
    </div>
    <div class="block">
        <input class="" type="text" placeholder="Phone">
        <input class="" type="text" placeholder="Email">
        <input class="" type="text" placeholder="Pincode">
    </div>
    <div class="block">
        <input class="" type="text" placeholder="Address">
        <input class="" type="text" placeholder="Address">
    </div>
    <div class="block">
        <button class="button is-primary">
            Submit
        </button>
    </div>
</body>
  
</html>

                    

Output:

Bulma Block

Bulma Block

Reference: https://bulma.io/documentation/elements/block/



Last Updated : 23 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads