Learn how Bulma can become a replacement for Bootstrap
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
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.
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!