Where to Discuss?

Local Group


This article series is successor of previous bulma article series.

Goal: A Bulma Material Design Experiment.

After using Bulma for a while, I decide to add custom classes for my tailor made flat theme.

Previous Article

This Bulma MD article series start from Step-04. Step-01 until step-03 contain Bulma preparation. You can read those article here:

In fact, you should read this first, before you continue with step-04 and after.



Opening Example in Browser

You can open the html file artefact directly from your file manager, or alternatively setup simple web server example such as browsersync, and enjoy the localhost:3000.

Table of Content

The table content is available as header on each tutorial. There, I present a Bootstrap Tutorial, step by step, for beginners.

Begin The Guidance

Material Design start from Step-04. Step-01 until step-03 contain Bulma preparation.

Step 01

Adding Bulma CSS

  • Without Bulma

  • Using CDN

  • Using Local


Step 02

Using Bulma CSS: Navigation Bar

  • Simple

  • Full Featured

  • With jQuery

  • With Vue JS

  • Adding Font Awesome


Step 03

Bulma Custom SASS

  • Custom maximum width class

  • Responsive gap using custom sass


Step 04

Material Design

  • Material Color Demo

  • Spacing Helper Demo


Step 05

HTML Box using Material Design

  • Main Blog and Aside Widget


Step 06


  • Blog Post Example



Have fun, and enjoy coding.

Bulma Material Design

Thank you for cloning the repository.

Begin The Guidance

Let’s get the tutorial started.

Consider continue reading [ Bulma MD - Helper ].

Thank you for reading.