πŸŽ‰ Bulma v1 is coming soon!

and much more…

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

Bulma is thankful to its Patreon and GitHub sponsors

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

Become a sponsor

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. πŸ˜‰

<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

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

After

Bulma

Modern CSS framework based on Flexbox

No JavaScript required

CSS only, so it integrates in any JS environment
See installation docs

Beautified by everyone

See what Bulma developers are building
Visit the expo

Loved by the community

See what Bulma fans are tweeting
See more love

And so much more

Join more than 200,000 developers

#native_company# #native_desc#
#native_cta#