Error
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
You are viewing the deprecated 0.9.3 version of the website. Click here to view the latest version
Block
Bulma’s most basic spacer block
The block
element is a simple spacer tool. It allows sibling HTML elements to have a consistent margin between them:
Example
HTML
As you can see, the first two blocks have a margin-bottom
applied, but not the third one.. That is because Bulma applies a space on all blocks, except the last one. This means you can use as many blocks as you want, the spacing will only appear between them.
Without using block
, the HTML elements would have no space between them:
Example
HTML
As a matter of fact, you're already using the block
without knowing it. Its CSS properties are shared across several Bulma elements and components:
breadcrumb
level
message
pagination
tabs
box
content
notification
other
progress
table
title
This is thanks to the @extend %block
Sass placeholder feature.
Here's how it would look like in comparison:
No matter which Bulma elements and components you are using, and no matter their order, they will have a consistent space between them.
As you can see, the CSS of the block
is very simple: it applies a margin-bottom
on all siblings, except the last one.
This prevents the last sibling to add unnecessary space at the bottom.
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub