loading...

Useful Bulma CSS Tip

simonhlee97 profile image Simon H Lee ・2 min read

I've been a big fan of Bulma ever since I first discovered it a few years ago. Bulma is a free, open source CSS framework based on Flexbox, created by Jeremy Thomas.

I love simplicity

I love the fact that Bulma is purely CSS and no javascript. Here's a nice comparison with Bootstrap. The class names and modifiers are all easy to remember and intuitive. (After using it a few times, you'll pick up the naming schemes for the modifiers quickly, and you'll refer to the docs less and less frequently). It is also very easy to customize or overwrite (without the need for !important).

Tip

Here's a simple table using Bulma's table class:

<table class="table is-fullwidth">
    <tr>
      <td>Hall of Fame</td>
    </tr>
    <tr>
      <td>Michael Jordan</td>
    </tr>
    <tr>
      <td>Magic Johnson</td>
    </tr>
    <tr>
      <td>Larry Bird</td>
    </tr>
    <tr>
      <td>Shaq</td>
    </tr>
  </tbody>
</table>

Alt Text

Like most people, I don't enjoy writing HTML tables. It's a lot of markup.

But if you use Bulma's .panel-block class, you can achieve the same table-like look with far less markup.

<p class="panel-block">Hall of Fame</p>
<p class="panel-block">Michael Jordan</p>
<p class="panel-block">Magic Johnson</p>
<p class="panel-block">Larry Bird</p>
<p class="panel-block">Shaq</p>

Here's the result. (Slightly bigger padding-top and padding-bottom makes it a bit more readable as well.)

Alt Text

Thanks for reading. More Bulma "hacks" and tips to come...

Posted on by:

simonhlee97 profile

Simon H Lee

@simonhlee97

I enjoy building apps with Vue, Vuex, MongoDB, Node, Express (MEVN stack) as well as React (MERN stack). I also build custom WordPress themes.

Discussion

pic
Editor guide