Bulma - Buttons

This tutorial covers Bulma framework features and examples..


Normal button

markdown <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 compatable issues in IE11
  • It is new entrant and not large community compared with other frameworks
  • framework is in development, final version is in processing

Components list and examples

Grid basicsprovides variables to store and use in multiple places
TablesData types allows to specify the allowd values for a variables
TypograhyAllows to reuse the styles
Buttonsprovides arthmatic operators