[go: up one dir, main page]
CSS Variables
Dart Sass
Flexbox
Modular
Open Source
Responsive
Free
Smart Grid
Auto Color
Skeletons
Themes
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
Download

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!
Get Started Download
CSS Variables
Dart Sass
Flexbox
Modular
Open Source
Responsive
Smart Grid

100% Responsive

Designed mobile-first

Modern

Flexbox + Grid + CSS Variables

Easy

Download. Customize. Done.

Free

Open Source on GitHub

Dark Mode

Choose a dark theme automatically or by user preference
See Dark Mode docs

Bulma

Modern CSS framework based on Flexbox

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

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

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

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

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

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

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

1

2

3

4

5

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>

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 
@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");

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

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

Get started Contribute

How to support Bulma

One-time donation

Browser testing via

Visit our Sponsors

Monthly donation

Become a sponsor
#native_company# #native_desc#
#native_cta#