Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.
Bulma also allows us to add our own CSS styling but it is advised to use an external stylesheet over inline styling.
Using Bulma: If you are a beginner web developer the simplest way is to use a jsDelivr CDN link within the head section of HTML file using link tag.
Another cool feature with Bulma is that it can simply import the SASS files you need for the particular elements on which you want to apply the Bulma styling. For example, if you want the Bulma styling for the form elements you can import only that sass file. Otherwise, you can install the Bulma package with npm.
Example: The Bulma syntax is extremely simple, there are predefined class names that help us to create elements according to the name.
It creates a stylized button with the word Hello on it.
The button created is not like the generic HTML button.
Each Bulma element has multiple alternative styles available, and these can be applied by using is- or has- class modifiers.
These modifiers form the basis for manipulating objects in Bulma. Some of the color modifiers that Bulma provides are:
The size modifiers ranging from is-size-1 to is-size-6. These helps in changing the font size. Try using h1 to h6 tags in Bulma, but you will notice that there is no change in the visible font size. This is because Bulma only uses the modifiers to change the size of the text and not in the standard HTML way. Try running this code to understand how h1 to h6 tags do not impact the size of the text:
hello world hello world hello world
Add multiple variations within the element class attribute. Try this code and observe that we have used two modifiers one for the color and the second one for the size.
- Responsive design for all devices(desktops, tablets and mobiles).
- Easy to read and write the code.
- In development stage.
- Needs minor improvements.
- New framework
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.