Bulma Block
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= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="is-size-2 has-text-success"> w3wiki </h1> <b class="is-size-4">Bulma Block </b> <div class="block"> <strong> w3wiki block 1</strong> A Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles. </div> <div class="block"> <strong> w3wiki block 2</strong> A Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles. </div> <div class="block"> <strong> w3wiki block 3</strong> A Computer Science portal for Beginner. 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= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="is-size-2 has-text-success"> w3wiki </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/