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
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
Reference: https://bulma.io/documentation/elements/block/