You are viewing the deprecated 0.9.2 version of the website. Click here to view the latest version

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

451 new subscribers this month.
Name Email 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

451 new subscribers this month.
Name Email 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.

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!