Bulma CSS Framework

Working on a project we could not use Bootstrap, I had to go out and find another technology that could do the same work. After spending some time looking at different ones, I decided to give Bulma a try because it looked quite similar to Bootstrap.

The first thing you want to do is link the HTML and the CSS together using Bulma, just enter this link;

Now you can start using Bulma to style your website. One of the cool features of Bulma is the 12 column layout. This means that you have one parent column and you are able to divide the child columns into 12 smaller ones. You can divide the child columns into as many as you want, as long as they add up to 12 columns. If you want, you can have 2 columns of 6 or 3 columns of 4 or 4 columns of 3, as long as they add up to 12. The code is very simple,

Another cool feature built into Bulma is responsiveness to different screen sizes. When the browser gets resized, the columns start to get smaller and once it gets to a breaking point, the columns stack on top of each other. However, if you don’t want the columns to stack on top of each other on a mobile screen, there’s a code for that. The code would be this,

Now with the code of “is-mobile,” the columns will remain horizontal when the page gets loaded onto a mobile device. The responsiveness feature of the columns is also available on the other components of the Bulma, developers can edit those as well. The documentation you find in Bulma is very good because it’s all very easy to read and use. The coolest part of the documentation is that all you need to do is copy the code snippet they give you and paste it into your own project as is. From then on, you could add small attributes to the code to make it do other things you might like.

I think the biggest takeaway from Bulma is its ready to use plug and play model that makes it super easy to use. Using Bulma to style web pages really helps you reduce the amount of time spent styling.