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

Bulma: an alternative to Bootstrap

See how Bulma can replace your Bootstrap setup

Both Bulma and Bootstrap are CSS frameworks that allow developers to quickly build web interfaces with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.

Why choose Bulma

Modern features

By using the latest CSS3 features such as Flexbox, and planning on using CSS Variables and CSS Grid, Bulma aims to stay on the bleeding edge of browser technology.

Simple grid system

To build a Bulma grid, you only need a single .columns container to wrap as many .column items as you want.

Easy-to-learn syntax

With simple readable class names like .button or .title, and a straightforward modifiers system like .is-primary or .is-large, it’s easy to pick up Bulma in minutes.
More about modifiers

Why choose Bootstrap

jQuery plugins

Bootstrap includes useful jQuery plugins to add interaction to your website.

Big community

Considering how long it has been around, Bootstrap has a larger community than Bulma. As a result, more tools (like theming and plugins) are available, and more questions are answered around the internet.

Internet Explorer compatibility

While 90% of Bulma works in IE11, Bootstrap has better compatibility with this browser.

Accessibility

Bulma has introduced some support for accessibility, but Bootstrap has strong and pervasive compatibility with WCAG 2.0 guidelines.

Comparison table

See which elements of the framework exist (or not) in the other

Bulma Bootstrap
Bulma Bootstrap
Grid system
columns row
column col
tile
Form
field
field is-grouped button groups
field is-grouped input groups
control form-group
label label
input form-control
textarea form-control
select
checkbox checkbox
radio radio
file
button is-static form-control-static
Elements
box
button button
content
delete close
icon glyphicon
image thumbnails
image is-16by9 responsive embed
notification alerts
progress progress bars
table table
tag labels
tag is-rounded badges
title h1 .. h6
subtitle h1 .. h6
lists
caret
Components
breadcrumb breadcrumbs
card card
dropdown dropdowns
level
list group
media object media object
menu
message panels
modal modal
navbar navbar
page header
pagination pagination
panel
tabs navs
wells
Layout
container container
hero jumbotron
section
footer
#native_company# #native_desc#
#native_cta#

Newsletter Features, releases, showcase… stay in the loop!