This tutorial explains about Bulma buttons with examples

Bulma buttons

Bulma provides different buttons with different styles as given below

<a class="button is-primary">Primary</a>
<a class="button is-link">Link</a>
<a class="button is-info">Info</a>
<a class="button is-success">Success</a>
<a class="button is-warning">Warning</a>
<a class="button is-danger">Danger</a>


You need to know basic HTML and CSS languages.

Features and advantages

  • Easy to use and simple to learn
  • Opensource and support major browsers
  • Mobile-first design
  • Flexbox integrated grid system
  • Responsive design
  • Modular - use required features only
  • NPM integration
  • It supports modular design
  • SASS and SCSS support
  • Customization is very easy
  • JavaScript is not required, Everything is coded in CSS


  • performance and compatible issues in IE11
  • It is a new entrant and not a large community compared with other frameworks
  • the framework is in development, and the final version is in processing

Components list and examples

Grid basicsprovides variables to store and use in multiple places
TablesData types allow specifying the allowed values for a variable
TypographyAllows reusing the styles
Buttonsprovides arithmetic operators