mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
4.9 KiB
4.9 KiB
title, layout, introduction, color, name, icon
| title | layout | introduction | color | name | icon |
|---|---|---|---|---|---|
| The `.block`, probably Bulma’s 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 | 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 |
For comparison, if there was no spacing, here's what they would look like:
Newsletter
451 new subscribers this month.
| Name | 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 |
This block element has always existed; only recently has there been a dedicated documentation page.