Bootstrap 5 Released | Hacker News Reader

Bootstrap 5 Released

blog.getbootstrap.com

186 pointsmkurz55 comments

I love bootstrap. Without it everything I make would be ugly. If you have zero design sense like me, give it a go.

Same, bootstrap and bootswatch are a godsend.

i had the same exact opinion about myself until i tried starting a project with just bootstrap's reboot css file and realized that was enough to get a nice style and build on top of that

I need to sit down and learn flex css property so I can replace bootstrap row and col with flex.

Why not grid?

TIL there's also grid.

And it seems to be well supported: https://caniuse.com/css-grid

Thank you.

Yes, and we'll be adding support for that as opt-in in v5.1.0! Here's a little teaser: https://deploy-preview-31813--twbs-bootstrap.netlify.app/doc....

Neat! I have been using Bootstrap for several years at work and for personal projects. It allows non-ux folks like me to build useable apps quickly. So thank you!

If you are looking for a quick way to get up to speed with flexbox or css-grid you should check out https://flexboxfroggy.com/ and https://cssgridgarden.com/ They are fun little tutorial games that introduce the basics

Why not both? Grid is superior for defining the overall structure of a page, but flex shines in micro-layouting. (Although the line between them is blurry sometimes).

agree

I tried to use it while in Beta and the big issue with these frameworks that include js today is how to use them with other js frameworks like Vue.js. For a js noob like me it’s a nightmare, so much that I had to downgrade to bootstrap 4 to use the unofficial bootstrap-vue framework.

That's exactly with what I'm struggling right now. I'm building a site with nuxt and bootstrap 5. So far I haven't made the js work.

Interesting.

I didn't have such issues with React.

Think you guys would really enjoy tailwind css. Easy to get it to work with JS frameworks like react, vie and or nuxt, svelte etc.

Would you be willing to provide examples of specific issues? I don't want to assume I know where the difficulty lies, and I'm interested in seeing where people have issues.

I wish we could have a sort of hard reset and start over with hypertext where you could present decent looking site after learning a markup language in an afternoon (i.e. my childhood memories from the mid 90s)

I want a new web where every page isn’t an application designed to monetize syping on me and even simple folk can share information without much trouble.

https://gemini.circumlunar.space/

A wonderful idea, except for the "Benevolent Dictator" part.

Somebody has to be there to say "no" otherwise it would just turn into HTML-again v(._. )v

there is not much to be dictatorial about, the gemini standard won't evolve and are designed to resist change. ( it's somewhere in the manifesto or FAQ )

It's kind of it "as-is", and not about the tech. But about being free from it and focusing on producting/consuming content in written form.

Sorry to be defensive, but I've been using a bringing writers to Gemini in the last year, and I never had to think about the governance of the protocol.

Maybe I'm wrong but I never crossed my mind.

This obviously isn't starting over with hypertext, but here's a HN thread about CSS stylesheets which are designed to apply pleasant styles to content written using simple HTML markup with no classes:

https://news.ycombinator.com/item?id=22681270

... it's still possible today. I mean unless I'm mistaken, I think you can still create website with HTML and CSS if you wanted to.

I used Bootstrap quite a while ago and the main issue I had with it was getting the JS based components to play nice with the virtual DOM.

So instead I used a fork like react-bootstrap, but it seemed to always lag behind a bit in terms of features/bugfixes, compared to the main project.

Is this still an issue, or is there a better approach?

Is there a specific example of what didn't work? It's been awhile since I've used react and bootstrap, but I remember that passing refs to the Bootstrap javascript directly (e.g. `tooltip = new bootstrap.Tooltip(ref, options)`) worked

Does it finally have a built-in dark theme?

Made my own previously using a customizer gui, but tuning all the colours, shadows, transparencies etc. so it looks good has no end.

I'm curious about this too. In the past I've used the free themes from Bootswatch: https://bootswatch.com/

e.g. Flatly and Darkly can be swapped in and used as a light/dark theme easily.

Also, means your site doesn't look as generic as the base Bootstrap theme.

Not yet, sorry! RTL was our big feature addition that came with some significant departures. Tried to keep the breaking changes and overhauls to a minimum compared to the v3-v4 migration.

Typo in https://getbootstrap.com/docs/5.0/components/scrollspy/#exam...

"Thidd heading"

I find Bootstrap still very useful for a backend UI, where ad-hoc styling is not so important, but it seems to have been taken over by tailwind, the new cool kid. Time will tell.

I don't see how they compete. Tailwind CSS is all utilities. Bootstrap offers components. It also has utilities, yes, but those aren't really the main offering.

Tailwind UI is not free.

I switched from using Bootstrap to Tailwind, to be fair I mostly used Bootstrap for columns and the responsive utilities.

Congrats Bootstrap maintainers/contributors! What an impactful project. Perusing the docs over the years, it's been interesting to see how they've incorporated web dev patterns.

I always loved learning and laughing from @mdo and @fat.

Thank you! <3

Bootstrap + Tailwind is my new favorite combination for front end sites. Bootstrap gets the web app up and running quickly, and then if the customer wants customization, we migrate the relevant areas to Tailwind. Congrats to the Bootstrap team!

I get the impression these are supposed to be mutually exclusive, since both are pretty heavy frameworks? Is that not the case? (I haven't touched frontend directly for a while, so maybe completely mistaken)

Not a Tailwind user (yet?) - but from what I understand, with the right build tooling setup, it's possible to only include additional CSS from Tailwind as needed, i.e., to define only the class names that are used. It could be lighter and more efficient than the classic way of using Bootstrap with a layer of custom styling on top.

+1 for adding RTL support. Should be added by default for all libraries especially that it's not hard to implement with CSS.

Congrats. For version 6 can you please add an autocomplete input element/feature?

Like https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da...?

Many people need support for searching asynchronously over the network, but this is neat.

You can append to the list.

Yes. But Bootstrap themed.

it's a regular and standard input tag, https://jsfiddle.net/4qLv16sx/

The input is, yes. But I don't think the suggestion box is, is it?

yea the suggestion list is a browser specific implementation, so it can vary, on Chrome you can do a little more by passing options labels: https://jsfiddle.net/caub/8cz7skvh/

I use another native HTML more often: `<details>`

Bootstrap 2 had a typeahead but it was removed in BS 3. (Possibly in favor of twitter typeahead which was more active at the time.)

https://getbootstrap.com/2.0.0/javascript.html#typeahead

https://twitter.github.io/typeahead.js/

No more jQuery!

woohoo? o_O

I recently did a project using Bootstrap 4, using vanilla ES6. Except for the modal dialogs - we couldn't figure out how to do Bootstrap modal event handling without jQuery (e.g. populate a model using an Ajax call when it's opened).

I actually like jQuery, but in this case it quite annoying having to have to bring it in where we needed it only for one tiny piece.

I'm sure we could have figured out a workaround if we spent enough time on it, but eventually you need to give up.

I even end up not including/importing the JS files, using CSS :hover/:focus-within dropdowns and :target modals

It looks like they managed to keep the amount of unnecessary added whitespace to a minimum this update. Kudos! :)

Or, just go with w3.css and be happy you have nothing to do with Jack Dorsey.

Or PureCSS https://purecss.io/

Awesome! Thank you!

Snark aside, we haven't had anything to do Twitter for almost nine years. They don't do anything for or with Bootstrap :).

Reply on news.ycombinator.com