
What’s New in Bootstrap 4 - scotchio
https://scotch.io/bar-talk/whats-new-in-bootstrap-4
======
thecodemonkey
I literally just asked myself that question yesterday but couldn't find any
good information on it. Nice write-up!

~~~
scotchio
Most of everything in this article is taken from their blog posts, their new
docs, looking through the source, and checking out the Bootstrap 4 pending
Pull Request [1].

Really just wanted to test all the new features and see what was what with it.
Decided to make some demos to compare some stuff too.

[1]
[https://github.com/twbs/bootstrap/pull/17021](https://github.com/twbs/bootstrap/pull/17021)

~~~
boundlessdreamz
What's the advantage of @media (min-width: 48em) { ... } over @media (min-
width: @screen-sm-min) { ... }

is the only benefit the additional media query? @media (min-width: 34em) { ...
}

But users could have already specified it in bootstrap 3 if they wanted?

------
lemevi
I'm glad they're supporting Bootstrap 3. The switch to Sass is unfortunate. I
never had a problem with compile times and being able to pick and choose the
bootstrap I needed in my own less build was really nice. I don't think I'll be
using newer versions of Bootstrap. Once they stop supporting 3 I think I'll
move on to a new CSS framework. I just think they shouldn't change builds like
this on frameworks that are already widely used. I'm sure Sass developers were
making use of Compass or other Sass frameworks if they needed to integrate the
framework with their own builds.

~~~
joshribakoff
I find it way easier to install less with node & npm, than it is to setup ruby
& sass. If I'm developing with a "mean" stack, its kind of a nuisance to have
to set up ruby instead of just using something node based.

None of the bootstrap stuff works with Angular out of the box anyways, and I
always thought it was very verbose. Honestly all I like was the grid system
anyways, so I don't see much need to upgrade.

~~~
Scottopherson
Ruby's not required. The article doesn't mention Ruby but it mentions libsass
(why Ruby is no longer required):

"This is great because Sass tends to be more favorable by front-end
developers. It also compiles faster thanks to Libsass."

[https://github.com/sass/libsass](https://github.com/sass/libsass)

~~~
lemevi
> This is great because Sass tends to be more favorable by front-end
> developers

I don't understand what this mangled sentence means. How do they know what's
favorable to front-end developers? Nobody asked me what I think. They did a
valid random sample?

~~~
coldtea
You know, they could always check relative watchers and other marks on GitHub
for example.

Doesn't have to be an exact science. How do we know Knockout is less popular
than Angular? And yet, we do.

~~~
lemevi
[https://github.com/less/less.js](https://github.com/less/less.js)

12k stars, yeah throw it out, it's done.

[https://github.com/sass/sass](https://github.com/sass/sass)

6k stars, definitely more popular, if less stars means more popular. Obviously
more front-end developers love sass! The evidence has spoken.

~~~
coldtea
I didn't speak for any of them, so the sarcasm doesn't apply to me. Actually
I've only ever used LESS.

That said, don't be so quick to just what's popular just by the relative size
of the numbers. I'd also check which had a headstart and by what margin.

A 3 year project with 12k stars for example is not necessarily more popular
NOW than a 1 year project with 6k stars.

That's why I advocated for several metrics.

------
itcodes
I will never be able to understand why the grid class names are abbreviated.
It's borderline unreadable and it's one of the primary reasons I avoid
bootstrap when I can. Foundation is much better in this regard class="large-6
columns" makes much more sense than class="col-lg-6".

This is a good article though. I've been wondering what changed in the new
version.

~~~
sirtastic
Seriously? Col is too difficult to understand as an abbreviation for column?

~~~
itcodes
It takes longer to parse. The same way "Wht r u talking abt" takes longer to
parse than "What are you talking about". The former requires my brain to do
several extra lookups before I arrive at the meaning. I would rather just type
the extra characters for the words Column and Large.

~~~
wvenable
After you've typed a thousand of these things your brain will just be doing a
single lookup. From a newbie perspective, your opinion has merit but for long-
term use it makes less sense.

~~~
nailer
Long term, making sure people use proper names for things is a great to make
sure people are writing code for others to read.

------
draebek
"It seems though that if you need Internet Explorer 8 support, you’ll have to
stick to using Bootstrap 3."

I'm kind of surprised. No doubt some user bases have user bases running newer
browsers, but with IE 8 still sitting at ~13% market share[1] I suspect this
will prevent many people from using Bootstrap 4, including myself.

[1]:
[https://www.google.com/search?q=ie8+market+share](https://www.google.com/search?q=ie8+market+share)

~~~
thedufer
I don't know where Net Market Share is getting their data, but that's _way_
off compared to literally everyone else who's reporting. The tip-off for me
was that they report all of Firefox+Chrome as ~10%. See
[https://en.wikipedia.org/wiki/Usage_share_of_web_browsers](https://en.wikipedia.org/wiki/Usage_share_of_web_browsers)
\- the IE share reported on that site is being overestimated by at least 2.5x
and more likely around 4x.

Or everyone else is getting it completely wrong, I guess.

~~~
AJ007
I'm at a fraction of a percentage for IE 8 as of yesterday in a sampling of
over 100,000 sessions. If the sample is from desktop only users, that numbers
moves up.

That is still a large enough number to matter for a startup where those make
or break growth & retention numbers matter. It would be insane to throw out 1%
of your visitors while other employees are doing cartwheels in A/B testing for
2% improvements.

The general principle I follow is drop support if a platform no longer
receives security updates. The second part of that is to continue to produce a
simplified version of your site that should work on all browsers. This
provides big benefits for disability access, low bandwidth users (which is all
of the developing markets), and edge cases.

~~~
wj
Probably depends on a site's audience. I know in the financial industry that
an unfortunately large amount of people still use IE8 as many vendor websites
require it (long live Active X). But I imagine the visitors to many B2C
websites no longer use IE8.

------
chao-
Flexbox and Sass-first is a nice surprise, but the switch to rems steals my
attention. I know that backwards-compatibility goals kept them on px, but that
has long been my one complaint with Bootstrap (as a regular user, not as that
guy who _" would use it except [minor reason]"_).

~~~
FilterSweep
I stayed away from Bootstrap 3 for that very reason in my front-end work.

I would keep my own REM _and_ %age-based "starter grids" (1, 3, 4, 6 and 12
column grids), along with a more simplistic <!--[if IE ]> pixel-based grid (IE
= rounding problems), on a USB stick which I would carry around from project
to project - allowing me to quickly mobilize from site wireframe to initial
mockup with a very short turnaround. For anyone who wants to waste the setup
time that I did, I used calculations by-hand along with the "Responsive Grid
Calculator"[0]

The other thing selling me over is the _opt-in_ flexbox support as well. If
your client has _only one_ big user who is on IE8, and this includes more non-
tech companies than I'd like to acknowledge, you will undoubtedly have to
support IE as well.

[0][http://www.responsivegridsystem.com/calculator/](http://www.responsivegridsystem.com/calculator/)

------
mokkol
Thanks for the post! very useful

------
dimgl
So, much ado about nothing

~~~
blowski
Actually, there's a lot of stuff in there that I'm going to find useful. The
flexbox integration is great, and hopefully will lead to wider adoption of
flexbox in general. Cards are something I've had to implement myself, and the
core one looks much nicer.

Perhaps it's not going to be useful for you, but for me, I'm grateful for all
the work put in by those involved in this open source project.

~~~
scotchio
Seriously I love that they added cards and dropped Panels and Wells. I used to
have to create something like cards on nearly every project and used
Panels/Wells maybe once.

~~~
orky56
Agreed! What I like about Bootstrap's development is giving people the
flexibility to jump into something new like panels/well & then look for other
plug-ins/hacks to customize the experience. Once those trends become more
mainstream, they do us all a favor and incorporate them more cleanly. Cards
are such a natural extension for a responsive layout.

