Bootstrap 4 Alpha 4 Released | Hacker News Reader

Bootstrap 4 Alpha 4 Released

blog.getbootstrap.com

142 pointsrev76 comments

I see a lot of people here and on GitHub project page complaining about compatibility with older versions of bootstrap. I don't get it - if your project is already working on older version of bootstrap - why even bother updating it, I mean it's only CSS code, it's not like it will bring you any speed improvements or something...I think it's neither bad or good thing that new version of bootstrap less and less compatible with older versions, this way at least we can get things like flexbox and drop support for older browsers for our new projects, without sacrificing it just for a sake of compatibility. From my experience it takes more time and issues from upgrading cars library compared to just keep using the older version.

> I mean it's only CSS code, it's not like it will bring you any speed improvements or something

Most people who use bootstrap3 use the JavaScript also.

I suspect the worry is in 2 years (or however long they are bug fixing bootstrap3), newer browsers will start to break on bootstrap3, and you will have a complex way forward.

What bootstrap4 is doing is good, but it also can cause pain for users of bootstrap3.

> newer browsers will start to break on bootstrap3

Is that a common thing for browsers to break on older, previously compatible CSS?

No, this fear seems totally unfounded.

Are there any cases of browsers breaking on older web standards? The only things I can think of that ever broke are plugins (Java, Flash) and vendor-specific extensions (e.g. lots of IE quirks).

<blink> element that was deprecated by browsers maybe. But that was non standard to begin with.

Probably only things experimental, non spec are in danger, but it's safe to think css is very future proof compared other languages designed for layouts.

I think chrome and safari made a bit of a mess with the rounded corners before it was standardized. One of them dropped the browser prefix and ended changing their implementation I think. My memory is very hazy though.

As has been repeated many times here. Bootstrap has javascript as well as CSS.

So same question then -- previously compatible javascript breaking in newer browsers is a thing? Are there some common examples of this (e.g. not just edge cases).

This is not relevant. We are considering the interaction between our code and the library. If the library has breaking changes to its api our code will no long work with it when the library needs to be updated to the new version and our site will break until our code is changed...

> We are considering the interaction between our code and the library.

Ah. The comment I replied to was not about this, but about bootstrap 3 breaking in newer browsers.

Fair enough. Your question makes sense then. The trouble is without security updates there is bound to be some exploit that will go un-patched so when support for bootstrap 3 finishes we will have to upgrade to 4 whether we like it or not.

Please don't spread false information, that's not how CSS works.

Bootstrap isn't just CSS: http://getbootstrap.com/javascript/

The fear is not that but that new features of Bootstrap will not be available to legacy users without major upgrades.

This. Nots sure why this would be hard to understand. If you have a long running project you now have few choices none of which are good. Keep using Bootstrap 3 for older work and use Bootstrap 4 for newer feature and make things inconsistent. Restyle/rewrite everything or keep using Bootstrap 3 and not have any of newer feature or UI pattern everyone takes for granted.

The only thing that could break Bootstrap 3 is browsers deprecating ASI and it's not on the roadmap of any major browser vendors.

What's new? I haven't been following bootstrap 4, ( especially since I switched to http://semantic-ui.com/ ).

* I see a list of themes priced at 100$ :/ (maybe that's a good thing?)

* "Moved from Less to Sass". OK, that's a late addition but always welcomed. (Although there was already an unofficial sass version of bootstrap.)

* "Opt-in flexbox support is here". Why would flexbox not be opt-out?

* "giving you more opinionated resets like box-sizing: border-box". About fucking time.

The blog post for the first Alpha lists a couple of major changes compared to Bootstrap 3 http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/

Just checked out semantic and I really like what it offers. But file size is a concern for my use case. Min css and js combined are almost 800 kB. Just button.min.css size is almost as large as bootstrap.min.css

There was a good video floating around of reasons to not use flex for the overall page layout, due to resizing as the content loaded.

I still do, but I can see why it's opt-in rather than opt out.

wow semantic-ui it's amazing! Quite heavy but love it and so flexible!

> I see a list of themes priced at 100$ :/ (maybe that's a good thing?)

I can see the utility in this. It's like an app store for bootstrap themes. The alternative is scouring the web, suffering the choice anxiety, working out if everything is compatible, etc.

These themes are built with Bootstrap 3

How is that a good thing (sass)? That means that instead of having a full JS build now they need Ruby too...

https://github.com/medialize/sass.js

According to http://blog.sass-lang.com/posts/809572-sass-35-release-candi... the C++ based libsass is almost 100% compatible with Ruby Sass.

Yes, but it's still a painful native dependency in the otherwise Node-based build process. Native dependencies are getting better in Node, but still have many painful edge cases.

what's the issue with that?

Why not just use something like Susy? I can't stand these grids unless I'm quickly trying to prototype something.

Has bootstrap been this slow to roll out future versions before? Feels like the main contributors are losing interesting/available time? (releases: https://github.com/twbs/bootstrap/releases)

I seen an issue on github[0] which mentions that a lot of development time is still spent on version 3, which is slowing down progress on version 4. I suppose future versions might take longer to roll out if they're supporting the previous version at the same time.

0: https://github.com/twbs/bootstrap/issues/20631

What CSS framework is recommend these days if you can afford being flexbox only?

I'm a big fan of bulma.io

What for do you need a framework? For buttons? For the grid? You most likely have to adjust them anyways, so why not make a clean approach without the bloat (in a sense of coding style [I'm very much into BEM]) of a framework?

yeah, mostly for the design part and CSS quirks among browsers. I do want to start with just sass and flexbox only though, but don't know how much hassle it will be.

Thanks for mentioning BEM, do you use it with sass?

I use SASS mixins specifically instead of BEM: this keeps styling out of my HTML (no visual classes to change) at the expense of a few bytes.

For me I always start with a framework because then I have easy access to templates.

I wouldn't have a clue where to start. Far easier just to grab a pre-made framework like this.

For vast majority of websites, no need to use framework. Work from scratch. No resets, no normalizing, nothing. Add in components as you go. Keep it light and bug free this way. Frameworks are unnecessary for most projects.

Unless you aren't into herding cats when every developer develops a brand new button / grid / whatever ever time the is a new addition to the site because they can't understand or find the original NIH element styles. If you happen to be lucky enough to be the only person ever working on the project then I would agree.

Beginning to wonder why they need to break compatibility so often?

Many frontend devs (including a younger version of myself) don't care about compatibility and have a "let's rewrite everything" mentality.

Because it's not meant for you to upgrade an existing front end from Bootstrap 3 to Bootstrap 4. It's meant for starting a new project on Bootstrap 4.

If you already have a working project on Bootstrap 3 why bother upgrading?

If they had to maintain backwards compatibility they wouldn't be able to make a lot of the improvements they make.

Presumably because at some point Bootstrap 3 will stop getting bug fixes. Historically, what has been their end-of-life policy?

So based on their github and some searching with google, historically they didn't have much of an end-of-life policy, because there were no bugfix releases for v1.x.x after v2 came out, and no bugfix releases for v2.x.x after v3 came out:

v3.0.0 - 2013-08-19

v3.0.0 RC1 - 2013-07-27

v2.3.2 - 2013-07-27

v2.3.1 - 2013-03-01

v2.0.0 - 2012-01-31

v1.4.0 - 2011-11-03

v1.3.0 - 2011-09-16

With major version 4 still being in alpha, there are concurrent releases of 3 going on still, but based on their previous releases, I don't expect a v3 bugfix release after 4.0.0.

They mention in the original alpha release article this was a mistake. They plan on supporting and bug fixing for the foreseeable future with bootstrap3

http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/

An update over the course of the previous 19 hours [1][2]; apparently that foreseeable future ended 10 hours after you posted this excellent reminder. They have begun closing [3] all outstanding github issues for v3 with the text:

  Bootstrap 3 is no longer being officially developed
  or supported.

  All work has moved onto our next major release, v4.
  As such, this issue or pull request is being closed
  as a "won't fix." For additional help and support,
  we recommend utilizing our community resources.
  Thanks for your understanding, and see you on the
  other side of v4!

  <3,
  @mdo and team

[1] https://github.com/twbs/bootstrap/issues/20631

[2] https://news.ycombinator.com/item?id=12435425

[3] https://github.com/twbs/bootstrap/issues/16913

We have been in the process of upgrading from Bootstrap 3 to 4 at work (in addition to other changes) - libraries we use on top of Bootstrap are moving to 4, so we need to too as long as we continue to maintain these applications.

In addition, it allows us to simplify CSS some by moving away from Bootstrap's crufty float-based grid system into a flexbox system, which simplifies some of our code.

The Bootstrap 3 to 4 upgrade isn't too bad as far as upgrades go.

Why do you even need to upgrade from old one? It's css, for christ sake.

Maybe she uses the javascript in bootstrap? It's not just css for christ sake.

It's said Bootstrap5 will possible use postcss, which is great.

Hope this can be released soon, I honestly feel tired waiting for Angular2 and Bootstrap4 and I began to use something else instead(vuejs that is, stuck with Bootstrap3)

Bootstrap 3 was released 3 years ago and the 4 has been on beta for 1 year now, so Bootstrap 5 will probably use something newer than postcss.

Version 4 was in development for a year when the first alpha was released, and now a year later they've released the fourth alpha version. It's not at beta yet.

Is that 3 releases in a row where they've changed their css compiler?

It may be that changing the CSS compiler is the only change they make that's big enough to warrant changing the major version number.

For anyone like me wondering what this flexbox stuff was all about:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Reminds me of swing and similar layout managers.

We've been using maximum of 1140px col-xl width since 1920x1080 was considered the bleeding edge, but now monitors with 2560x1440 resolution are becoming more common- where 1140 barely covers half the width of the screen.

Isn't about time we had a grid container that fixed this?

Stop using grids and use flexbox instead!

What is the average resolution of a phone held vert?

Average of all phones is likely pretty bad, considering quality and quantity of cheap chinese phones. The average of your visitors is probably much better, but still a meaningless number.

More interesting: the Galaxy S7 has a 2560x1440 display. Same for the HTC 10 and the LG V10. The iPhone 6 Plus has a 1920×1080 display, with the iPhone 7 about to be revealed.

But these phones are not that wide when it comes to CSS pixels. This is just resolution.

I believe latest iPhone is 414px.

A page that wide doesn't sound very practical unless you want lots and lots of columns. I was taught that an average 10 words per line is best for reading.

Lots of columns can be great. Newspapers have been doing that for centuries.

I've been trying to reconcile print design principles with screen, and the main difference is that on a screen you have unlimited vertical space. A newspaper layout doesn't really make sense - do I go to the next column, or scroll down? I think there are ways to guide the readers eye to where you want it to go with color or in other ways, but it's an interesting design problem.

I admit I'm one of the few that very much liked the Windows 8 design language approach of readable columns scrolling off infinitely horizontally. I thought that was a good design path. Screens don't have to scroll vertically.

Thoughts on when 4.0 stable will come out?

There's 483 open issues with the label 'v4' to be addressed first. I see an open issue for Alpha 5 and then there'll probably be release candidates so at least a couple of months.

Bootstrap 4 has been in alpha for a bit over a year now. So, probably not anytime soon.

Super excited for flexbox support.

Tested and looks like compatibility is broken with offsets , changes to btn sizes, label margins and looks like custom style for select form elements has changed or removed.

I think its best not to use this in any projects until its out of beta.

You mean out of alpha? Even more reason not to use it!

Eh. I regularly use EcmaScript stage 0 proposals in smaller projects. If it's not getting a heap of users, why not experiment?

Fair point, though I assume GP meant real products/work.

http://v4-alpha.getbootstrap.com/getting-started/flexbox/ praise jah

Good stuff but that blue CTA color is somehow causing eye cancer.

Reply on news.ycombinator.com