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

Block

Bulma's most basic spacer block

Colors No
Sizes No
Variables Yes

The block element is a simple spacer tool. It allows sibling HTML elements to have a consistent margin between them:

This text is within a block.
This text is within a second block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
This text is within a third block. This block has no margin at the bottom.
<div class="block">
  This text is within a <strong>block</strong>.
</div>
<div class="block">
  This text is within a <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</div>
<div class="block">
  This text is within a <strong>third block</strong>. This block has no margin at the bottom.
</div>

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:

This text is not within a block.
This text isn't within a block either. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
This text is also not within a block.
<div>
  This text is <em>not</em> within a <strong>block</strong>.
</div>
<div>
  This text <em>isn't</em> within a <strong>block</strong> either. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</div>
<div>
  This text is also <em>not</em> within a <strong>block</strong>.
</div>

One line of CSS #

As you can see, the CSS of the block is very simple: it applies a margin-bottom on all siblings, except the last one.

.block:not(:last-child) {
  margin-bottom: 1.5rem;
}

This prevents the last sibling to add unnecessary space at the bottom.


Already used everywhere in Bulma #

As a matter of fact, you're already using the block without knowing it. The block 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.

As a result, no matter which Bulma elements and components you are using, and no matter their order, they will have a consistent space between them.

Made with Bulma
This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#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!