# Bulma: an alternative to Bootstrap

Learn how Bulma can become a replacement for Bootstrap

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

Font Awesome support

Bulma is compatible with Font Awesome thanks to the `.icon` element.

100+ useful CSS helpers

Bulma ships with more than 100 helpers to specify color, display, and spacing.
Responsive helpers – Typography helpers – Other helpers

No JavaScript

By focusing only on CSS, Bulma provides a lightweight solution that can easily be implemented in any development context.

> https://t.co/vY1ZsRScYM -- a CSS framework by @jgthms -- is lovely! No JS included, which means no JS opinions included!

> — Robert Stuttaford (@RobStuttaford) May 6, 2017

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

Additional elements

Bootstrap has some elements like list group, wells, or page header that Bulma doesn’t have.

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

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!