Bulma is an open source CSS framework based on Flexbox and used by more than 100,000 developers.

npm install bulmacopy

Video by Vue Mastery

Ads via Carbon

The simplest grid system

Just add columns, they will resize themselves

Better on desktop

This interactive tool works better on larger screens! That's because Bulma columns are vertical by default. I recommend revisiting this page later when you're on desktop. 😉

Add column Remove

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

Info

While it's possible to add as many columns as you want, it is recommended to stick with 12 columns.
If you want smaller divisions, you can always nest columns.

A growing community

See what Bulma fans are saying

Jesse Schoff @jesseschoff

Bulma, I think I'm in love. bulma.io via @jgthms

9:10 PM - 29 May 2017

Per Axbom @axbom

I've spent a few hours now with the Bulma CSS framework and I have to say it's the most beautifully written framework I've ever had the pleasure of working with. Nice work @jgthms 👊 bulma.io #bulmaio

5:48 PM - 22 Feb 2018

Han Too Wan @UnMecRandom

I've been following Bulma for a while now and it's time to use it for real in a customized dashboard and I have to say: it is neat, sexy and lightweight (compared to Bootstrap). Thx @jgthms ! 😍 bulma.io #bulmaio

10:07 AM - 1 Feb 2018

Juan Carlos Andreu @andreujuanc

Best css framework, amazing implementation. No idea how I lived without this.
bulma.io #bulmaio via @jgthms

3:11 PM - 4 Oct 2017

scottgallant @scottgallant

bulma.io is an impressive CSS framework. Flexbox grid, no JS, modular components (use what you need), Sass.

💯 @jgthms.

12:51 PM - 26 Feb 2017

Chris Sevilleja @chrisoncode

Want a change of pace from Bootstrap? Try Bulma. It's my BFF right now #bestframeworkforever scotch.io/bar-talk/get-t…

9:00 PM - 21 Sep 2017

Amir Azimi @AmirHassanAzimi

Still like #bulma, more than #bootstrap. Even the syntax is cleaner. @jgthms

3:45 PM - 1 Sep 2017

Dan Allen ✊ @mojavelinux

@jgthms Thank you Jeremy. I really appreciate your work. It means a lot to me and my small business.

12:50 PM - 7 Jan 2018

Jeroen Coussement @coussej

Spent months comparing frontend frameworks for both #css and #javascript. Settled on @jgthms's #bulmaio for CSS and @Rich_Harris's @sveltejs for Javascript. Works great, there is a clear separation of look and function, and the resulting code is super clean. Perfect combo ! 🚀

4:35 PM - 24 Oct 2017

See more love 🤗

So easy to learn

Get a design started within minutes

Francisco Cruz @atFranCruz

So, I was making an exam and in a matter of 30 minutes I had my structure complete with responsive, Bulma is crazy. Thanks @jgthms

3:01 PM - 28 May 2017

button

Button

button is-primary

Button

button is-primary is-large

Button

button is-primary is-large is-loading

Button

So quick to customize

Simply set your own Sass variables before importing Bulma

          // Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;

// Update some of Bulma's component variables
$control-border-width: 2px;
$input-background-color: $beige-lighter;
$input-border-color: transparent;
$input-shadow: none;

// Import the rest of Bulma
@import "../path/to/bulma";
          

        