Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Block

Improve Article
Save Article
  • Last Updated : 23 Feb, 2022
Improve Article
Save Article

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/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!