CSS Variables
Dart Sass
Open Source
Smart Grid
Auto Color
The most beautifully written framework I've ever had the pleasure of working with.
Avatar of Per Axbom Per Axbom
Bulma CSS by @jgthms is just perfect.
Avatar of Alejandro Barrera A. Alejandro Barrera A.
After 5 minutes I have #bulmaio working. It's a miracle!!!! @jgthms
Avatar of Jamie Jamie
Bulma, I think I'm in love.
Avatar of Jesse Schoff Jesse Schoff
We're very happy that @jgthms created the Bulma CSS framework.
Avatar of Infinity Search Infinity Search
With 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.
Avatar of Bruh Bruh

The Modern
CSS Framework

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!
CSS Variables
Dart Sass
Open Source
Smart Grid

Dark Mode

Choose a dark theme automatically or by user preference


Modern CSS framework based on Flexbox

Changes successfully saved
<div data-theme="dark">
  <h1 class="title">Bulma</h1>

  <p class="subtitle">
    Modern CSS framework based on <a href="https://bulma.io">Flexbox</a>

  <div class="message is-success">
    <div class="message-body">
      Changes successfully saved

  <div class="field">
    <input class="input" type="text" placeholder="Your Name">

  <div class="field">
    <div class="select">
      <select><option>Select dropdown</option></select>

  <div class="buttons">
    <a class="button is-link is-soft">Save Changes</a>
    <a class="button is-danger is-soft">Cancel</a>

Bulma is thankful to its 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

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>

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



button is-primary


button is-primary is-large


button is-primary is-large is-loading


So quick to customize

Simply set your own Sass variables before importing Bulma
@use "sass:color";

// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Path to Bulma's sass folder
@use "path/to/bulma/sass" with (
  $family-primary: '"Nunito", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px,
  $input-h: color.hue($beige-lighter),
  $input-s: color.saturation($beige-lighter),
  $input-background-l: color.lightness($beige-lighter),
  $input-border-l: color.lightness($beige-lighter),
  $input-shadow: none

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



Modern CSS framework based on Flexbox



Modern CSS framework based on Flexbox

No JavaScript required

CSS only, so it integrates in any JS environment

Beautified by everyone

See what Bulma developers are building

Loved by the community

See what Bulma fans are tweeting

And so much more

Join more than 200,000 developers

How to support Bulma

#native_company# #native_desc#