
Bootstrap 4 drops IE9 support and goes full flexbox - luisrudge
https://github.com/twbs/bootstrap/pull/21389
======
mgkimsal
For everyone saying "Foundation" when people ask what else... let me explain
why Bootstrap is used so much more frequently than all other options combined.

[http://foundation.zurb.com](http://foundation.zurb.com) vs
[http://getbootstrap.com](http://getbootstrap.com)

Each has a link to 'download'.

Foundation's link takes me to a page where I have a bunch of options, and a
bit "build a custom generated version".

Bootstrap's takes me to a screen with 3 options, but also - and this is key -
CDN links. Right there. I can paste a few lines in my HTML template and start
working.

I don't need to download/generate code.

I don't need to install node/npm/etc.

I don't need to install and learn sass stuff.

I don't need to make a lot of decisions or do a lot of extra unrelated stuff
to get started.

Bootstrap is the PHP of the css/grid/framework world (for better and for
worse).

I truly hope they keep the CDN hosted stuff for Bootstrap 4.

EDIT: didn't mean to pick on foundation specifically - this "take control of
every aspect of all your layout/grid/css" that most other frameworks require
works to their disadvantage when it comes to popularity and uptake.

~~~
tylersmith
The need to just copy and paste code that links to CDNs is why so many people
don't take frontend development seriously.

~~~
mrweasel
npm, bower, grunt, webpack and whatever is trendy right now, is the reason why
some front development isn't take seriously.

Having the CDN link, or download with the js and css files is in my view a
sign that you know what you're doing. Requiring me to use two package managers
and a build tool that I didn't pick is uprofessionel.

~~~
TomMarius
> two package managers and a build tool that I didn't pick is uprofessionel.

I don't see the difference from Ubuntu forcing you to use APT or C++
applications forcing you to use Make.

------
ceejay
I find it extremely powerful that major open source projects are calling the
shots instead of the major browser vendors.

For some who may not recall, I think the most famous / historic move was when
jQuery decided version 2 would deprecate support for IE 6/7/8.

Originally jQuery project would go out of their way to make sure all browsers
were covered. Needless to say these days Microsoft is far more receptive to
the needs of the open source community.

~~~
gramstrong
>Microsoft is far more receptive to the needs of the open source community.

They are, but not for this reason. Microsoft doesn't even support IE9 anymore,
so there's not really any reason for any open-sourced project to do so.

~~~
ceejay
I apologize for not being more clear. I was thinking about the flexbox more
than the IE9 deprecation. The jQuery story was only to reinforce the idea that
open source projects are "at the negotiating table".

[http://caniuse.com/#feat=flexbox](http://caniuse.com/#feat=flexbox)

There is a footnote on that page for IE11 (I believe still supported by
Microsoft) that says:

"Partial support is due to large amount of bugs present (see known issues)".

------
based2
> [http://flexboxfroggy.com/](http://flexboxfroggy.com/)

~~~
baby
This is amazing. Do you have something similar to learn HTML or CSS?

~~~
olieidel
yes, CSS Diner: [https://flukeout.github.io](https://flukeout.github.io)

------
astrodust
It's so great that IE9 is essentially extinct.

~~~
nightski
It must be nice. I work in commodities and there are many plants and
facilities that still only have access to IE8/9\. It was a large struggle to
even drop IE6/7 with a huge amount of backlash.

~~~
intrasight
I just tell them that anything below IE11 is a violation of corporate security
standards and won't be supported.

~~~
nightski
I am not a direct employee. It's actually the IT departments that push back.

~~~
intrasight
What I did (last year) was to make sure they had at least read
[https://www.microsoft.com/en-us/WindowsForBusiness/End-of-
IE...](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support).

IT only pushes back because the business users who use old web apps push back.
Gotta make sure that IT knows the MSFT no longer has their back and so they
need to be more aggressive with the business users and their app vendors.

------
dbond
"Drop IE9 support for v4 beta?" "fuck it, why not"

[https://github.com/twbs/bootstrap/issues/21387](https://github.com/twbs/bootstrap/issues/21387)

This isn't how you should drop support, it might be a good choice but can we
at least have some discussion, maybe even an RFC, not just declare it be so
within the space of 3 hours and lock the issue...

Like this:
[https://github.com/emberjs/rfcs/pull/45](https://github.com/emberjs/rfcs/pull/45)

~~~
avita1
It's worth noting that nothing on github suggests that the person who made
that comment is a contributor/maintainer for Bootstrap.

~~~
tracker1
mdo is one of the creators of bootstrap. I also feel it's probably time to
move on from IE < 11, and possibly even then depending on your real needs.
Even MS has worked pretty hard to get people off of IE and into Win10+Edge

------
tmoreton
Finally! Every other major framework needs to jump on this bandwagon and stop
supporting IE9 and then the users will realize they are outdated...at least I
would hope so. Every aspect of Frontend development adds a ton of extra hours
when building around IE9's quirks. I had the same idea as Bootstrap building
my own Flexbox based CSS framework Useful.ly

------
cygned
Ah the worst thing about Bootstrap is jQuery because it's a pain to integrate
it into Single Page Applications properly. That's why I enjoy Bulma (bulma.io)
so much - just CSS but still 90% of the stuff you get in Bootstrap.

~~~
Ralfp
I don't really understand whats so hard about using Bootstrap with it's JS in
SPA. I've adapted BS components for Ember.js, I've did same with Mithril.js
and then React.js, and I've never had problems.

My only pain points were lack of proper destructors for use in tests.

~~~
cygned
I also use it with React, but it took me some time to set it up properly. The
challenge is, that

    
    
        import jquery from 'jquery'
        window.$ = window.jQuery = jquery;
    
        import 'bootstrap';
    

doesn't really work because webpack (what we use) moves all import statements
to the top. That can be solved by import bootstrap with

    
    
        require('bootstrap');
    

though.

However, the more challenging and annoying part are plugins because jQuery
uses it's own plugin registry ($.fn). Most of the plugins are so nice to
require it if require is available. But, the things you get from require are
cached, thus, if you do

    
    
        const $ = require('jquery');
        $.fn.yada = ...
    

your registered function will not be available to other jQuery imports.

Long story short, what's so annoying about this technology is the fact that it
does not fit the modularized setups very well but you are forced to find a way
for it to work when you want to use bootstrap with the JavaScript additions.

~~~
tracker1
You can inject window.$ and window.jQuery via webpack directly, making the
inclusion implicit... there's a minor amount of additional script added, and
it makes it unavailable to attach to the actual window, but I find the DOM
interfaces sufficient in the console anyway.

~~~
cygned
I added it via expose-loader and with the ProvidePlugin but neither of it
worked. Eventually some technique (loader, plugin and/or require()) made it
work and I gave up and didn't touch it since then.

------
nateberkopec
I've replaced Bootstrap with Milligram
([https://milligram.github.io/](https://milligram.github.io/)) on all of my
projects.

Yes, it weighs far far less (which makes it suitable for inlining directly in
the head tag), but mostly I just find the source far more readable.

~~~
thirdsun
This is actually kind of nice. I hate frameworks like Bootstrap that try to
make any design / styling decisions. It's my experience that unless you're
fine with that out of the box styling, you'll actually fight the framework
while customizing it.

A small, lightweight framework that focuses on the very basics, avoids styling
and frees me from repeating boilerplate code in every project is most welcome.

Milligram looks promising in that regard. My other alternative was Corpus:
[http://jamiewilson.io/corpus/](http://jamiewilson.io/corpus/)

------
tribby
traditionally the reason I've avoided flexbox for layout (fine for most items
within that layout) is the wonky rendering on slower connections[0]. is
bootstrap doing anything to get around this or did they really go "full
flexbox"? since I use susy[1] I'll never need bootstrap for grids, but I'm
curious about the flexbox adoption and tradeoffs.

0\.
[https://www.youtube.com/watch?v=vPryjyFP5FM](https://www.youtube.com/watch?v=vPryjyFP5FM)

1\. [http://susy.oddbird.net/](http://susy.oddbird.net/)

~~~
angry-hacker
Uh, does connection speed really plays a role when it comes to browser
painting the elements? I'm not sure of I understand.

~~~
rspeer
The observation in the linked video is that, when the browser is incrementally
rendering the page, a traditional "grid" layout will put the content in its
final location, while a flexbox will render a box of content that's bigger
than usual and shrink it later -- because the items that cause the content
area to shrink haven't been loaded yet.

------
apaprocki
What are peoples' opinions whether CSS Grid will replace Flexbox usage in a
lot of simple layout cases?

~~~
ahoy
The general thinking is

* use CSS Grid for layout in 2 dimensions. Page level layout essentially

* use Flexbox for layout in 1 dimension. "module" level layout.

These are not hard and fast rules, like much in CSS.

~~~
konschubert
I am really confused with CSS grid. How does it adjust to smaller screen
sizes? My impression is that it is rigid like an html table, and we have
mostly abandoned these for good reasons.

With flexbox I can make the sidebar float below the content at a certain
screen size. Can I do this with grid?

So if anything, it seems to me that the global layout should be done with
flexbox, and the grid is for smaller, more rigid elements that do not need to
re-order on different screen sizes.

~~~
WorldMaker
Most of the same tricks to flexbox reordering and reflowing for responsive
layouts apply to CSS grid as well. You can use @media queries to switch grid
layouts based on things like screen size. With more recent specs you get a
further advantage in that where flexbox reordering is based on easy to mix up
numbering (at this media layout this Div A is 1, Div B is 2, Div C is 3, but
in this other layout Div A is 3, Div B is 1 and Div C is 2) for naming your
grid sections (Div A is "sidebar" and Div B is "main-content" and Div C is
"footer"); the names stay consistent and only your designation of which name
goes where in the grid flow (which is managed at the parent container level)
shifts with media query reflows.

~~~
WorldMaker
For what it is worth, I built a complicated 2D, responsive layout for my blog
(mostly to amuse myself). I allowed myself whatever tech choices I felt
comfortable using and I wish I could have used Grid but browser support wasn't
where I would have liked and neither was prollyfill support. The Flexbox
version I built is a lot less simple to follow in the CSS media query
switching than the Grid equivalent would have been (but Flexbox version has
been quite reliable across browsers). Though the biggest loss in not having
Grid support turned out to be what I wanted to do for DL (DD, DT) layout,
since I tend to use those quite heavily, and neither Flexbox nor CSS Table
Layout suffice (due to DT+DD[+DD...] sets lacking a wrapper element, per HTML
spec).

------
rado
An unfortunate tipping point for accessibility. My personal project natUIve is
full flexbox, supports IE8, doesn't require JS even for the slider.
[https://radogado.github.io/natuive/](https://radogado.github.io/natuive/)

~~~
pmontra
Nice project.

The immediate visual difference with Bootstrap is square corners vs rounded
corners. Buttons and other components look strange after years of Bootstrap
and its impact on web design. There is probably a few rules to edit to fix
that, still... why having to do the work?

Anyway, I'll try to remember natUIve if a customer asks me to support old (but
not so old) browsers.

~~~
rado
Hi, thank you. That's one of the biggest problems with Bootstrap – a framework
should not impose design on the creators.

The issue isn't just about old browsers. IE8 might not matter, but by
supporting 10 years in the past you also make sure it will work 10 years in
the future, following the standards. Simple, accessible HTML is under attack
by the JS frameworks and most of the industry. When the framework du jour
collapses under its complexity in 5 years, we'll be back to HTML.

Regards.

------
jgalt212
I'm a bit sad for the dropping of IE 9 support, if only because it was the
first IE that had a "fast" JS engine and didn't take forever to render our JS
heavy site.

------
ourmandave
Of course there's a flexbox JS shim.

[https://github.com/jonathantneal/flexibility](https://github.com/jonathantneal/flexibility)

~~~
ng12
Does anyone have experience using this with an SPA (React/Angular/etc)? I'd
love to try it out so I can avoid having two layout styles.

~~~
tracker1
For many of the components, it's easy enough to do the necessary styling via
your own controls (tabs in particular) as opposed to trying to map the jquery
+ bootstrap.js... if you can avoid their JS, you can save some overhead. ymmv.

If you're going with React, you might want to look at material-ui[1] with a
normalize css include and a basic (manual) flexbox layout to begin with. The
components offered are really complete for a UI framework, and depending on
your needs, working from dev branch may be a good option.

[1] [http://www.material-ui.com/](http://www.material-ui.com/)

~~~
ng12
Flexibility is for browser compat, not sure how this helps.

------
chiefalchemist
Slightly off topic but ZURB Foundation for Email is a nice tool for generation
markup that'll work in most email clients

FWIW you don't really know a lot of Foundation to use it.

------
sergiotapia
That's great. I wonder how much traffic will be saved worldwide without .col-
md-6 html being sent around. Just straight up content HTML with minimal
"boxing".

This is great news!

------
andy_ppp
I'd love it if they had a things don't look broken promise for IE9. Seems like
it should be relatively easy to sequentially layout the page in IE9 without
flexbox?

Is everyone else dropping IE9 support at this stage...

I'm a bit out of the frontend developer loop these days being full stack and
learning things like docker or elixir is more fun, and useful, than the
vagaries of the latest promise library/CSS Pre processor/awful class naming
scheme/etc.

------
cwt137
This is a pull request that hasn't been merged yet. Maybe the title should be
"Proposal to drop IE9 support and go full flexbox in Bootstrap 4"

~~~
tracker1
The PR is from MDO, and I'd be surprised if he didn't have commit access.

------
ksec
Since Google, is essentially what everybody in the western world uses to
search, ( Russia, China, Japan, Korea all gets their own search from somewhere
else. )

I wish they could release some stats on browser usage. Otherwise i dont know
where to get concrete information without substantial bias. Also the time
which browsers are used. Since people are likely using different browsers in
School / Work compared to at Home.

------
gtk40
IE7-IE9 still receive security updates on some versions of Windows.
[https://support.microsoft.com/en-us/gp/microsoft-internet-
ex...](https://support.microsoft.com/en-us/gp/microsoft-internet-explorer/en-
us)

IE9 is the newest version of IE available for Windows Vista SP2 for example.

~~~
torgoguys
Vista extended support ends in April of 2017. It's the last holdout of
Microsoft-supported mainstream versions of Windows (i.e., excluding fringe
versions like Windows Embedded) that can't upgrade beyond IE9. Seems
reasonable that the new version of Bootstrap (which you don't have to use--v3
still works fine) should not bother with support for a browser that will soon
be no longer supported by the browser's own creator.

They should probably even consider dropping IE10 support if it is _any_ sort
of burden to them. IE10's marketshare is so tiny (smaller than IE9, IIRC).
Windows Vista (i.e., "Windows 6") users used IE9 since MS didn't support
anything beyond that for Vista while Windows 7 users mostly auto-updated to
IE11.

------
desireco42
Right move. We need to push forward.

------
szastupov
Migration from 3 to 4 will certainly be a pain but then you're gonna love it.
I love new cards, utility classes, better out of the box support for mobile
browsers.

But beware of breaking changes between alphas, there are quite a few.

~~~
chiefalchemist
I'm presuming it's not a migration as much as a complete makeover/refactoring.
Which could be interesting. Does that open the door to Foundation? That is, if
you're going to more or less start over is now the time to jump the Bootstrap
ship and climb on board with Foundation?

~~~
szastupov
By migration I meant migration for a project that already uses Bootstrap 3 and
considers using 4.

Speaking of Foundation, I dunno, it depends on one's needs.

Some people say Bootstrap is too big but I appreciate its vast collection of
components. Especially when you do CMS / control panel kind of apps and you
need to make them quick, Bootstrap is a saviour.

Also, aesthetically I like those rounded form controls, buttons and cards.
Plus it takes only a few lines of scss to make bootstrap look branded, add
custom fonts and most people won't even guess it's Bootstrap.

~~~
chiefalchemist
Yes. I got what you meant by migration :) My arc was that the difference from
3 to 4 looks to be fairly vast, and that you're all but rebuilding (i.e., it's
a new site/application). Or darn close.

So if you've been considering Foundation this could be a window for Foundation
to pick up some marketshare.

------
bluetwo
My front-end framework is simply HTML, CSS, and JavaScript.

Why complicate my life?

I do love flexbox, but I would rather simply code it by hand rather than have
some tool/framework/precompiler do it for me.

~~~
extra88
> Why complicate my life?

Why reinvent the wheel? Unless you've already created your own pattern library
to draw from, you're not going to save time writing it all yourself. How are
users going to benefit from your hand-rolled code?

There may be plenty of good answers to these questions but they should be
asked.

~~~
exodust
I'm pretty sure using bootstrap is re-inventing the wheel more than hand
coding is. Using a framework which when installed and configured gives you the
end result of a "wheel", as opposed to just coding up the wheel using
HTML/CSS. Let's also make it clear that hand coding doesn't mean sitting there
repeatedly typing out every character on every new job. There is always
previous jobs and code to draw on to flesh out the needs of a page or site
build efficiently and reliably. The benefit for developers is that you have
very detailed control and knowledge of the frontend, rather than some broad
"does Bootstrap do this thing I want" buffer between you and your own work.
Each to their own. No right or wrong.

------
truth_sentinell
Was about damn time a major player like this dropped IE, should have been IE10
though. Good move nonetheless.

------
dexterdog
I thought you never go full flexbox

------
buckbova
Does anyone know when to expect a RC? Looks to be in alpha still.

~~~
wcarron
At this rate, I expect Armageddon before Bootstrap 4 gets an RC.

~~~
xeromal
It's better than angular going to RC 5x and making huge changes inbetween. lol

------
vayarajesh
I feel I have gotten too used to Material design and I hardly ever use
bootstrap. Do anyone of you feel the same?

What are the advantages of Bootstrap over Material Design?

------
scotchio
What percentage of users still use IE9?

~~~
grandalf
It's mostly government offices and large firms. I believe IE9 support is still
required by most government agencies.

~~~
EugeneOZ
Large firms pay large bills. So IE9 will not die without a fight.

~~~
grandalf
True. I think MS just gradually shifts the costs so that at a certain point
the cost of upgrading everything to the latest OS version seems like a good
deal compared with the support requirements of IE9.

------
jeffehobbs
Excellent choice!

------
wcarron
Bootstrap is really so far behind now I don't know why anyone even considers
it as a viable option anymore. How long have they been in alpha/beta stage
without a solid RC? It's legitimately pathetic and abysmal at this point.

I'm honestly really confused. I'd love to ask one of the devs how they've
managed to literally do nothing while other, better CSS frameworks have been
created AND versioned in the same timeframe.

Bootstrap 4 is just a sad attempt at preventing obsolescence. Time to let it
die.

~~~
ergo14
Any other options you can recommend that have any traction among developers?

(I know about zurb)

~~~
OriginalPenguin
I'm really enjoying using Semantic UI. They have an official version of it
specifically for React.

