The .block
, probably Bulma’s most important feature
23 Jan 2021
The Bulma block
is a simple element but with a very powerful feature: it provides 1.5rem
margin at the bottom, if it’s not the last child.
It exists as its own .block
CSS class, but its properties are also used on many other Bulma components.
For example, if you were to combine a notification
, and a pagination
, they would be automatically spaced evenly:
Newsletter
Name | Actions | |
---|---|---|
Alex | [email protected] | Edit · Delete |
Sam | [email protected] | Edit · Delete |
Luke | [email protected] | Edit · Delete |
Eli | [email protected] | Edit · Delete |
Dan | [email protected] | Edit · Delete |
For comparison, if there was no spacing, here’s what they would look like:
Newsletter
Name | Actions | |
---|---|---|
Alex | [email protected] | Edit · Delete |
Sam | [email protected] | Edit · Delete |
Luke | [email protected] | Edit · Delete |
Eli | [email protected] | Edit · Delete |
Dan | [email protected] | Edit · Delete |
This block
element has always existed; only recently has there been a dedicated documentation page.