I used to love Bootstrap. God, now I just hate it | Hacker News Reader

I used to love Bootstrap. God, now I just hate it

ruky.me

26 pointsrukshn21 comments

In some respects I think the author is slightly over-exaggerating.

Bootstrap remains one of the better frameworks out there, and certainly one of the better (if not the best) maintained frameworks out there.

Bootstrap 5 is not perfect, but in many respects its a great improvement over what went before (e.g. removing jQuery, improved flexbox support etc.).

Bootstrap 5 is not without valid criticism though, for example a small number of heavily opinionated decisions such as removing support for dropdown nested menus - the authors, when asked for their reasoning behind the decision presented no reason other than "we decided five years ago its was too difficult and that's that".

However the author of this HN post does touch on the underlying problem. There is no real competition to Bootstrap which is well maintained.

Often I have looked around for alternatives. But I end up coming back to Bootstrap because it has the most complete featureset and is the best maintained. Other frameworks have simply either become abandonware (e.g. Foundation), are just too complex in syntax for their own good (e.g. Tailwind) or simply don't have the featureset (others).

Accessible, unbreakable 3-level menu: https://niui.dev/#nav

> slightly over-exaggerating

What's the difference between exaggerating and slightly over-exaggerating?

> What's the difference between exaggerating and slightly over-exaggerating?

An adverb. :p

(In all seriousness, technically a reflection of the severity, but more likely a turn of phrase).

I've started disliking bootstrap after the pointless breaking changes in every major release where they decide to remove/rename semantic names which they no longer believe are relevant. CSS breaking changes are especially annoying as you basically need to resort to inspecting every page to see what UI is broken.

I've yet to experience the same result with utility frameworks like tailwind as their class names are based on intuitive short-hands of CSS properties instead of made up artificial semantic names which can change on a whim.

The main thing I dislike about tailwind is needing a background process which further complicates a website build process, so I've resorted to maintaining a useful subset of primary tailwind utility classes and just the color themes I'm interested coming in at ~60kb unzip / ~12 kb gzip [1]. Ultimately I'd prefer if a popular framework like Bootstrap to become a static utility stylesheet, but I don't believe they know if they want to be a semantic CSS framework or a utility based one so we end up with short-hands like ms-* and me-* for left/firght margins instead of tailwinds intuitive ml-* and mr-* which results in basic spacing classes being pointlessly incompatible between major CSS frameworks.

[1] https://servicestack.net/css/litewind.css

I have heard lots of people praise Tailwind, but have only used Bulma (and Bootstrap to a lesser degree) in the past.

I tried to look into Tailwind for a small project I'm developing right now, and literally got stuck immediately on this:

Right now, I use toggles from Bulma-Extensions [0]. They work great!

If I wanted to have those in Tailwind [1], that would be $279 (+tax) please.

I don't need anything fancy, or any other Tailwind UI component. I just want a nice toggle.

Maybe I could write that myself, but you probably get that it's more about the principle of "how easy is it to find well-made second-party UI components and extensions". And Tailwind is not looking great.

[0] https://wikiki.github.io/form/switch/ [1] https://tailwindui.com/components/application-ui/forms/toggl...

tailwind guys do a thing called headless ui https://headlessui.dev/ it has a toggle, you can take that and customise it how you want.

This has good usability and style, but is dependent on frameworks?

its made for tailwind, the style is just an example, you can make it look however you like.

As the other commenter said, you can just use HeadlessUI and add CSS styling on top of it. They have examples for React and Vue. There are also third party sites with free components where you can just copy the styles

https://tailwindcomponents.com/search?query=toggle

You don't actually need to pay for TailwindUI. Most people just use those as starting packs to get good looking projects off the ground much faster cause then they don't need to style so much from scratch

That was sort-of what I expected, thanks! That fits much closer to the Bootstrap/Bulma model of things.

My google-fu must have had an off day.

I like Tailwind and I'm not a fan of Bootstrap, but I don't think they're targeted at the same crowd at all.

Tailwind and other utility frameworks aim to solve (well, avoid) the naming problem, and address the common tendency for a project's CSS to devolve into hyper-specific rules where you can't modify or remove anything for fear of breaking something else. The downside is that it doesn't provide any pre-made components for you—you've either got to build them yourself or use something someone else has built.

Bootstrap, Bulma, etc. are largely focussed on providing pre-made components (albeit with some utility classes), with the downside that making one-off modifications (e.g. "I want this panel, but in this one specific place it needs to have no bottom margin") is typically very awkward—or at least was in the Bootstrap 3 days; admittedly I haven't really used 4 or 5.

I'm not a web designer but sometimes I have to set up a web interface quickly for internal tools or whatnot and I find Bootstrap very convenient, especially for responsiveness. I've not used it before version 4 though, so I came with no preexisting ideas about how a web framework should behave and be designed.

I think Bootstrap 5 came with important improvements over Bootstrap 4 like not requiring jQuery (although it works very well with it) and the "gap" utility classes.

So basically Bootstrap isn't great because a major version upgrade changed a few things? Most of it is the same with a few tweaks.

There's a lot worse version bumps like ExpressJS where the (at least seemingly) entire API got rewrote in a major version jump.

HN seriously needs a "Useless" button similar to "Flag" for articles that are clearly written by people who have more disposable time than experience on the subject at hand.

Older versions of bootstrap work just fine too.

I've been using v3 and v4 in various projects without issue.

I don't feel like upgrading a CSS framework is as important as an NPM library, since I wouldn't expect security issues etc. to crop up here.

You'll still get dinged in security audits for it if your auditor feels lazy and needs some gotcha to prove his worth to management.

I've been trying to argue against it, but in the end management would rather waste money on completely pointless bootstrap updates than change their policies. Oh well, not my money…

This is a complaint mostly about the bootstrap DSL.

I agree the changes between each major version are non-trivial. So much so, I've basically not updated some websites because it's too much work. And like the author, I've tried other frameworks and they have their corner quirks or get abandoned.

But, Bootstrap is the only one that has tested time, and sits in the 'just works' camp. Once I've learned the DSL, I'm incredibly fast at how to structure UI elements (assuming the designer followed the grid, which is hardly a guarantee).

Still, 100% agree on the pain of upgrading.

I am a big fan of Bootstrap 4 and Bulma, haven't really touched Bootstrap 5 but I have been using Bootstrap since the early releases and it saved me thousands of hours. If I were the author instead, I think it would be beneficial to go on their Github repo and voice concerns constructively. After all the people behind bootstrap are developers just like us, frustrated from most CSS things and useless PRs/open issues. A little help goes a long way!

It is misunderstood and intended only as an easy way to add UI to your app. Trouble is, people started using it for everything.

It is too opinionated and still uses a general :focus { outline: 0} which is a big no-no. Development of real products invariably turns into overriding its CSS.

The carousel for example is outdated and limited so here's an alternative (shameless plug) – https://nativecarousel.com

Agreed, I keep thinking about migrating from our (mostly) React Bootstrap UI to Tailwind. React Bootstrap has a lot of interactive functionality (dropdowns, fancy forms) that I'm not sure if we can get from Tailwind withouot building ourselves.

Reply on news.ycombinator.com