The official Bulma blog

订阅

Blog launched, new responsive columns, new helpers

Stay updated with everything that’s coming up with Bulma

February 9th, 2016

First blog post on the newly launched blog! It even has its own RSS feed for those who still use that. This blog will be more frequently updated than the newsletter, so you can subscribe to either or both, as they will be used for different purposes.

Columns on mobile too

By default, columns are only activated on tablet and desktop. If you want to use columns on mobile too, add the is-mobile modifier on the columns container.

<div class="columns is-mobile">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <!-- etc. -->
</div>

Responsive columns

You can now apply different column size for each breakpoint.

For example, let’s say you want a column to take half the width on mobile, a third on tablet, and a quarter on desktop:

is-half-mobile
is-one-third-tablet
is-one-quarter-desktop

1

1

1

1

<div class="columns is-mobile">
  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop"></div>
  <!-- Other columns -->
</div>
Info
If you use mobile modifiers on single column elements, make sure to use the is-mobile modifier on the columns container.

Multiline columns

By default, if you want to start a new row, you just need to close a columns container and open a new one.

But you can also add the is-multiline modifier on the columns container, and use column size modifiers (like is-half or is-3) to define size on multiple rows within the same container.

is-one-quarter

is-one-quarter

is-one-quarter

is-one-quarter

is-half

is-one-quarter

is-one-quarter

is-one-quarter

Auto

<div class="columns is-multiline is-mobile">
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-half"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column"></div>
</div>

Helpers section

While modifiers are specific to each Bulma element, helpers are general utility classes that can be applied on almost any element. Check out the new helpers documentation!