---
bulma:
- type: "bulma"
icon: "css3"
title: "Modern features"
content: "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."
- type: "bulma"
icon: "pause"
title: "Simple grid system"
content: "To build a Bulma grid, you only need a single `.columns` container to wrap as many `.column` items as you want."
- type: "bulma"
icon: "heart"
title: "Easy-to-learn syntax"
content: "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](/documentation/modifiers/syntax/)"
- type: "bulma"
icon: "fa"
title: "Font Awesome support"
content: "Bulma is compatible with [Font Awesome](http://fontawesome.io/) thanks to the `.icon` element."
- type: "bulma"
icon: "plus"
title: "100+ useful CSS helpers"
content: 'Bulma ships with more than **100 helpers** to specify color, display, and spacing. [Responsive helpers](/documentation/modifiers/responsive-helpers/) – [Typography helpers](/documentation/modifiers/typography-helpers/) – [Other helpers](/documentation/modifiers/helpers/)'
- type: "bulma"
icon: "code"
title: "No JavaScript"
content: '
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!
'
bootstrap:
- type: "bootstrap"
icon: "plug"
title: "jQuery plugins"
content: "Bootstrap includes useful jQuery plugins to add **interaction** to your website."
- type: "bootstrap"
icon: "internet-explorer"
title: "Internet Explorer compatibility"
content: "While 90% of Bulma works in IE11, Bootstrap has a better **compatibility** with this browser."
- type: "bootstrap"
icon: "list"
title: "Additional elements"
content: "Bootstrap has a few more **elements** like the [list group](http://getbootstrap.com/components/#list-group), [wells](http://getbootstrap.com/components/#wells), or the [page header](http://getbootstrap.com/components/#page-header)."
---
Bulma: an alternative to Bootstrap
{% include navbar.html id="Documentation" %}
Bulma: an alternative to Bootstrap
Learn how Bulma can become a replacement for Bootstrap
{% include carbon.html %}
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
{% include svg/bulma-b.svg %}
{% for pro in page.bulma %}
{%
include pro.html
type=pro.type
icon=pro.icon
title=pro.title
content=pro.content
%}
{% endfor %}
Why choose Bootstrap
{% include svg/bootstrap-icon.svg %}
{% for pro in page.bootstrap %}
{%
include pro.html
type=pro.type
icon=pro.icon
title=pro.title
content=pro.content
%}
{% endfor %}
Comparison table
See which elements of the framework exist (or not) in the other