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

Bulma

A modern CSS framework based on Flexbox

npm install bulma

Download v0.5.1 View docs

Simple columns

Just add columns, they will resize themselves

1

2

3

4

5

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.

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

Magic tiles

A single element for a Metro UI CSS grid

Vertical...

Top tile

...tiles

Bottom tile

Middle tile

With an image

Wide tile

Aligned with the right tile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Tall tile

With even more content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

<div class="tile is-ancestor">
  <div class="tile is-vertical is-8">
    <div class="tile">
      <div class="tile is-parent is-vertical">
        <article class="tile is-child">
          <!-- Any content you want here -->
        </article>
        <article class="tile is-child">
          <!-- Any content you want here -->
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child">
          <!-- Any content you want here -->
        </article>
      </div>
    </div>
    <div class="tile is-parent">
      <article class="tile is-child">
        <!-- Any content you want here -->
      </article>
    </div>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child">
      <!-- Any content you want here -->
    </article>
  </div>
</div>

Flexible horizontal level

Include any type of element, they will remain vertically centered


Versatile media object

A simple block with an image that will solve 90% of your UI problems

Image

John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Easy vertical centering in fullscreen

Include any content you want, it's always centered

Compose your element with modifier classes

Add and combine is-* CSS classes to quickly alter styles

button

Button

button is-primary

Button

button is-primary is-large

Button

button is-primary is-large is-loading

Button

And all the usual elements and components

Elements

Image

John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit
Black Dark Light White Primary Info Success Warning Danger

Components

Image
Image

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
11:09 PM - 1 Jan 2016

β€œThere are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”

Jeff Atwood

Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.


Get started

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!