loading...
Cover image for Bulma - The Most Underrated Framework of the CSS Framework Era

Bulma vs Bootstrap Bulma - The Most Underrated Framework of the CSS Framework Era

justaashir profile image Aashir Aamir Khan Updated on ・2 min read

Everyone was using a CSS Framework to simplify their work and save their time, Bootstrap was and is King Right Now of the Frameworks Market. Every Institute, Almost Every Tutorial on YouTube was using Bootstrap, Developers were not learning Fundamentals of CSS and using Bootstrap. I was also a beginner at that time, I learned HTML and CSS from W3schools and Lynda. Then I used a lot of floats to make web pages, and kinda like the way.


Responsive Design was my next goal, so CSS Framework was the Easiest way for Responsiveness, I tried to read docs and watched Bootstrap Videos but Bootstrap terrified me with lots of classes and inconvenient naming, and I didn't like to use bootstrap cause I think every website using Bootstrap looks quite similar it also applies styles on element as defaults, I tried two or more times but didn't get Bootstrap in my mind, so I found some alternatives like Foundation and Material, but they were just like Bootstrap. I just wanted to make my site Responsive, and then I found the video of Brad Traversy Skeleton CSS


I loved Skeleton CSS but now their devs are not updating it, its not based on CSS grid or Flexbox. There were some confusions in it, and then I found Bulma , I was just using YouTube as usual and then I came to Bulma.css Tutorial Video tagged β€œThe Easiest Framework You can learn in 20 minutes”, Hmm I watched it and it really changed my life, It was really the easiest framework, even you don't have to remember the classes and there are some of the advantages :

  • No default Styling
  • Powerful Flexbox Grid
  • Small Size in Kbs
  • Reusable and You can modify Sass
  • No Javascript only CSS
  • Reusable Components

I am Kinda Obsessed with Bulma(I think) But You can give it a try.
This is my First Post BTW, You can Follow me on Twitter πŸ˜‰ https://www.twitter.com/justaashir

Posted on by:

justaashir profile

Aashir Aamir Khan

@justaashir

Branding @justifyagencyhq ✨ @vuejs developer ✨ Technical Writer ✨ Super Motivated ✨ UI/UX ✨ Branding Enthusiast πŸŽ‰

Discussion

markdown guide
 

I agree that Bulma is worth a try. While Bootstrap is the most "pushed" framework, I think the "kitchen-sink" concept should not be relied upon heavily for times when you only need a faucet. I like that you point out how the work flow for new developers is "backwards" in learning core CSS values after taking on a framework like Bootstrap. In my opinion, communities can be too quick to offer frameworks as a solution before individuals even understand why these frameworks were created in the first place. Nice article.

 

This guy just summarized my entire article.

 

My go tos are Bulma for company internal sites that need a lot of boilerplate form and table CRUD stuff; Tailwind for anything public facing that needs a unique design or just needs to look interesting. Both are significantly faster and easier to use than Bootstrap.

 

How does Bulma compare to Bootstrap in terms of features?
My use would be for internal company sites as well, where "no js" or "smaller size" doesn't make too much difference, but developer speed does.

 

I mean probably a lot smaller feature set but the point on those kinds of sites is that you can make do with very little compared to public sites. I'd give the docs a read and see if you think it has what you need. Definitely much faster to use, less markup, less futzing. Just drop in the example code and roll.

 
 

Hello @amir ,
Good article, thank you!
Bulma has the potential to grow, IMO. Also, Tailwind looks promising.

CSS Framework 2019 Survey Results -  Published on WpTavern.com

2019 Survey Results - Published on WpTavern

For new projects, I'm using Bulma (Sorry Bootstrap), and prototype pages using two resources:

  • Bulma Builder - the free tier
  • Bulma Components - an open-source components collection

A real problem is to find some nice templates to start fast a new project, only a few available on ThemeForest & related markets.

Happy (CSS) Styling & Coding!

 
 

Do you happen to have a source for this graph/survey? Very interesting intel πŸ”₯

 

Hello Juliette,
The survey was published here - Full credit to WpTavern

 
 
 
 

Of course 😊 TailwindCSS is too good to not to ignore

 

Bootstrap 4+ is unbeatable for the last 4 years!

 

I really agree with you! But if a person only want grid system and not the other things? as defaults??

 

If you only want grid, just use CSS Grid. No javascript or any framework needed nor required.

 

Yes! If I want to choose only grid, I can pull only grid from bootstrap!

Then It will be really great 😊 , I have some bad experience with Bootstrap though. As So I wrote this post

With sass you can only pull the components that you need. Also the global style reset is great, it does wonders for cross browser comparability.

 

I use Buefy which is Bulma based for Vue. It is great :-)

 

Keep Using What you like , not what others are using

 

I needed some css framework a few years ago. Did some research and start using Bulma. Really like it, especially since JavaScript is optional, making it very easy to use with clojurescript. The use is probably growing, but as long as it's not included in one of the major frameworks the use stays limited compared to bootstrap probably. Not sure if that's either good or bad for Bulma users.

 

Bulma is good; got datepicker, timepicker, datetimepicker (which super hard to find on other framework). My only problem with Bulma is the documentation.

For example, does Bulma offer something like "pt-0"? How to search the documentation? I have to use google to search for specific component features. Sometimes I search inside the "bulma.css" to know whether I should introduce my own class or can reuse existing class.

Unlike Bootstrap with its fast build in search (and keyword friendly too). So at the end, what makes a framework good is its documentation and tons of external tutorial or samples.

 

Hi, Aizal... You're absolutely correct.

Time changes, as opinions, I wrote this post 6 months ago and since then I've used Bulma a lot, and when you use it a lot, you will start finding the complications and I found a lot of downsides including padding-margin utilities and there is little to no documentation on making 'title' 'subtitle' or many other classes responsive. There are lots of other things as well that made me hate Bulma a lot.

I just tried TailwindCSS and It's super-perfect, for everything... I regret that I used Bulma for our SaSS application that ended being a mess of custom SCSS with margin-padding functions and media queries.

It made me compromise with my creativity, So I highly un-recommend Bulma now.

Check the TailwindCSS pen here, I can't imagine creating it with Bulma: codepen.io/justaashir/pen/mdeeKbz

 

Excellent first post! I hope you will write many more. I have used bulma a bunch, and like it, but I've been using purecss.io more lately. I also tried it tachyons as well. So many good options these days.

 

I can say I tried all those mentioned frameworks. Actually for me right now tailwind CSS is the king of css frameworks. All I need included. Worth a try.

 

I tried Bulma CSS once.. and it's really impressive and it has good potential also..

 

Bulma has always been at the edge of my mind, but I've never fully dug into it like I meant to!

Maybe one of these days. πŸ˜‚

 

interesting article. Made me think to stop using bootstrap. its true most of the people just use it for grid system. I'm going to give bulma try.

 

Thanks, That's what this post is for, Try New Things

 

No wonder Bulma is a great CSS framework! We have started using it in most of our sites, including our blog site blogs.syntaxsofts.com, as it is easy to use and understandable.

We have also published a blog on why we chose Bulma as our primary choice of CSS frameworks. Read it here - blogs.syntaxsofts.com/displayBlog/...

 

Thanks for sharing this,
Bulma is great 😁.

 

Is bulma to web what flutter is to mobile?

 

If you've been to skeleton and need some flex box dynamism,your next stop should be milligram css, now that is underrated!

 
 

As a backend focused engineer I find Bulma very relieving (if I need to touch css for any reason)

 

It's really easy to implement Bulma without breaking the workflow.

 

Take a look at tailwind (tailwindcss.com). It's much more simpler for me and also with purgeCSS you can get your output css file up to few kbs.

 

I came across bulma last week and book marked the page for later.
Was thinking of using it for my next project in vue.
You Just gave me the push I needed

 

Buddy
Foundation and Boostrap also good.

But why you rely on Frameworks. Write code from scratch. Man

 

Yep , but what about DRY principal?

 

Plus One for Bulma.
Thanks for the shout.

 

Tell us about Your bulma experience so far

 
 

I'm certainly going to give Bulma a try. With bootstrap you can now pick and choose the UI modules separately. Great post!!

 

Bulma link throws dns error but otherwise look forward to working with this tech. Thanks!

 
 

How about tailwind,have you tried it

 

My next post is about it πŸ˜‚

 

Built two sites on Bulma. Really liked it!

 

I ❀️❀️❀️ Bulma! It's my go-to CSS framework with Picnic CSS as a close second!