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

Bulma: the modern
CSS framework that
just works.

Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

No CSS knowledge required.

npm install bulma

Video by Vue Mastery

Alejandro Barrera A. @ale_codes

Bulma CSS by @jgthms is just perfect. Simple, easily customizable and doesn't impose Javascript implementations.

After experimenting with @tailwindcss and finding that utility first css is just not my thing, Bulma felt like a breath of fresh air.

#webdevelopment #CSS

3:33 PM - 10 May 2019

Jamie @MyTopSecretName

Omg I've been fighting with bootstrap and foundation, trying to get them to work with my rails app, for days. After 5 minutes I have #bulmaio working. It's a miracle!!!! @jgthms

4:15 PM - 16 Dec 2020

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

Bruce Tate @redrapids

One of the main contributors to our success at grox.io: the Bulma framework by @jgthms.

His work is brilliant. It’s very low JavaScript, and it plays very well with @elixirphoenix #liveview.

In short, Bulma provides its value and gets out of the way. Thanks!

3:11 PM - 25 Apr 2020

Infinity Search @InfinitySearch1

We're very happy that @jgthms created the Bulma CSS framework. It has saved us a ton of time and made our site responsive on all devices! pic.twitter.com/lvEM7uhcLn

6:41 PM - 18 Mar 2020

Bruh @bruhandle

Okay so with @jgthms’s Bulma, I was able to make each one of my pages on my website’s templates in one single day with no prior knowledge on how to use it, the docs are super easy to understand and it’s a great library. #css

5:30 AM - 18 Jun 2019

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

Alejandro Barrera A. @ale_codes

3:33 PM - 10 May 2019

Jamie @MyTopSecretName

Omg I've been fighting with bootstrap and foundation, trying to get them to work with my rails app, for days. After 5 minutes I have #bulmaio working. It's a miracle!!!! @jgthms

4:15 PM - 16 Dec 2020

Jesse Schoff @jesseschoff

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

9:10 PM - 29 May 2017

Per Axbom @axbom

5:48 PM - 22 Feb 2018

Bulma is thankful to its Patreon and GitHub sponsors

Their support contributes to the continuous development of Bulma and other open source software.

The simplest grid system

Just add columns, they will resize themselves

See columns docs

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.

So easy to learn

Get a design started within minutes

See modifiers syntax

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

See customization docs

Lars @LarsPeterke

Wanted a dark mode and discovered that in my build steps for @bulmaio inverting the values for $black, $white and greyscales and setting a bg-color for the html element is 90% of the work done. Relly great work by @jgthms to make stuff like this SO easy! #coding #webdev pic.twitter.com/nm84fBXcbU

2:13 PM - 5 Dec 2018

// 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";

Before

Bulma

Modern CSS framework based on Flexbox

Primary Link

After

Bulma

Modern CSS framework based on Flexbox

Primary Link

No JavaScript required

CSS only, so it integrates in any JS environment

See installation docs

Robert Stuttaford @RobStuttaford

bulma.io -- a CSS framework by @jgthms -- is lovely! No JS included, which means no JS opinions included!

4:53 PM - 6 May 2017

Beautified by everyone

See what Bulma developers are bulding

Visit the expo

Loved by the community

See what Bulma fans are tweeting

See more love

chris sev @chris__sev

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

KwesForms @kwesforms

Rebuilt our entire frontend in Bulma! Loved every minute of it. Our dashboard is next 😁. @jgthms

#javascript #CSS #Bulma #100DaysOfCode #DEVCommunity #html

10:55 PM - 5 Oct 2020

Luca Crea @Luca_Crea

Just dropped for my next project PureCSS – which I love – to try #Bulma by @jgthms 🤝 I'm already 100% in 💚 with it.
So many classes. Super cool #UI elements. A complete documentation. #Opensource
I mean, if you didn't try Bulma #css yet, check it out 👉 bulma.io

9:29 PM - 26 Nov 2018

Thomas Dubosc @Repraze

I've been working on some @reactjs layouts components along with some #CSS extensions to #bulmaio from @jgthms - Featuring side panels, collapsible/flexible boxes and popout window that stay in sync through react portals! I can create desktop like web apps now 👍 pic.twitter.com/G7OqZD7XSn

6:25 PM - 15 Mar 2019

Prance (They/Them) @pranceTheDeer

Building a new site right now that I can't wait to show off soon. @jgthms makes it easy thanks to bulma.io

Loving working with it on this project.

11:53 PM - 8 Jul 2019

db4you @db4you2

Bloody hell.... To think that I was using my own simple framework for all of the #Frontend #webdevelopment. Here is a my old login page vs #bulmaio framework... Me so dumb. Why reinvent the wheel? Amazing job @jgthms #CSS pic.twitter.com/X5NnKZxyQq

11:29 PM - 13 Aug 2019

Bruce Tate @redrapids

3:11 PM - 25 Apr 2020

Martin Verbic @martin_verbic

The Bulma (@jgthms) and @Ghost for building a blog is so remarkable. Bulma takes care of the design and Ghost of writing. And both can be/are minimalistic - exactly what you need for simple blogging without design restrictions. #Bulma #blog

martinverbic.com

2:08 PM - 25 Sep 2019

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

ninan kara @ninankara

thanks Bulma for saving my day.
@jgthms

when-a-developer-is-asked-to-design-a-website pic.twitter.com/i44O1nDMNd

8:26 AM - 28 Sep 2020

Amir Azimi @azimidev

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

3:45 PM - 1 Sep 2017

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