bulma/docs/_posts/2021-01-23-the-block-probably-bulmas-most-important-feature.md
2021-01-24 12:06:16 +00:00

4.9 KiB
Raw Blame History

title layout introduction color name icon
The `.block`, probably Bulmas most important feature post Automatic spacing for everything in Bulma danger The Bulma block cube

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

451 new subscribers this month.
Name Email Actions
Alex alex.smith@example.com Edit · Delete
Sam sam.rogers@example.com Edit · Delete
Luke hello.luke@example.com Edit · Delete
Eli eli.larry@example.com Edit · Delete
Dan dan.danny@example.com Edit · Delete
Previous Next page

For comparison, if there was no spacing, here's what they would look like:

Newsletter

451 new subscribers this month.
Name Email Actions
Alex alex.smith@example.com Edit · Delete
Sam sam.rogers@example.com Edit · Delete
Luke hello.luke@example.com Edit · Delete
Eli eli.larry@example.com Edit · Delete
Dan dan.danny@example.com Edit · Delete
Previous Next page

This block element has always existed; only recently has there been a dedicated documentation page.