
Bootstrap 4's mobile-first flexbox grid system, now used by default - berry_sortoro
https://v4-alpha.getbootstrap.com/layout/grid/
======
tannhaeuser
BS 4 has only very recently gone all-in on flexbox so what's the expectation
towards a 4.0 GA release date? A major benefit of Bootstrap is that it's
really well tested on all kinds of devices (something that's difficult to
achieve with your own CSS). But now that it's using flexbox for its grid
doesn't that mean that testing has to be restarted all over?

Not that there's a need to rush it; I really appreciate Bootstrap's "it's
ready when it's ready" stance. Personally I also like that the BS devs had the
balls to rewrite their grid system based on flexbox this late in the
development cycle, rather than hanging on to something you're not convinced of
and focussing on getting a release out the door.

To those criticizing Bootstrap, here are my reasons why I like Bootstrap:

BS was incredibly useful for getting me back into contemporary/responsive CSS
after a longer period of absence from webdev. I ended up overwriting many
things, but that's why it's called "Bootstrap" after all I guess.

Bootstrap is also very useful as a baseline CSS in larger projects with
multiple teams developing a uniform-looking web site.

And you can get a ton of themes for relatively little money (though not
everything on offer is great of course). You can also contract an agency or
freelance designer to make a BS theme for you, with a straightforward
workflow.

Also, you can get relative good and targetted StackOverflow etc. advice on
your daily CSS problems.

And, when BS4 finally is released, you don't have to redo your complete site
to take advantage of it (or at least I hope so).

~~~
samwillis
Upgrading from bs3 to bs4 is as close to a complete rewrite of your front end
as you can get. Just the fact they switched from less to sass means that if
you use less as well to extend and build upon the bs components you need to
completely rewrite everything.

I use bs3 and love it, however my plan is not to upgrade to bs4, it's to
slowly pull out and replace anything that could be modernised over time. The
risk of breaking something is too great.

~~~
ZeroGravitas
"Upgrading from bs3 to bs4 is as close to a complete rewrite of your front end
as you can get."

That's slightly hyperbolic. I don't think they intend for the primary use case
to be for people to upgrade in place, like updating a nightly Firefox, but
rather to start new projects with the new version. But previous big upgrades
have been largely a bunch of search and replaces. There's various tools that
people have written to automate this. Again, I wouldn't blindly run it and
expect everything to work, but it's far, far less than a complete rewrite.

~~~
samwillis
Completely agree, wasn't intending to be hyperbolic. My intention was to
indicate to the GP that upgrading an existing project from bs3 to 4 would be
hard and mostly unnessasery. And clearly not the main intention of the bs
team.

We all do tend to do a redesign of our sites and apps eventually and that the
correct time to make the transition.

------
meehow
Now I can use CSS like I was using tables 15 years ago.

~~~
andybak
To be fair you've been able to do that with display: table-cell etc.

I do love seeing <div class="table"> around the place. Sigh.

~~~
spaceribs
Not exactly, you couldn't get colspans or rowspans with that.

~~~
naasking
Yeah, they really dropped the ball on that. Being able to specify vertical and
horizontal layouts this way would have solved a lot of problems that now
require flex and soon CSS grids.

------
notheguyouthink
For someone who doesn't really like CSS and has little design "sense", what
would be your most recommended CSS Framework? I'd like lots of built in
features, and a grid/layout system that makes the most obvious sense in
usage.. ie, if it invents custom terminology for what is a row or column, or
perhaps has lots of "always use this class with a new row" style rules, that
is stuff the developer needs to learn. Lower barrier to entry means it's
easier to pick up and "get shit done" for side projects/etc. Less looking at
documentation.

At the moment i'm plain (non theme'd) SemanticUI. The UX/etc makes a lot of
sense, the only downside is i'm using the plain CSS so i don't get a theme -
but that's not a big deal. I can always add a separate build step for the css.

~~~
pmontra
Bootstrap served me well. I'm a developer. I'm OK with CSS but I have little
design "sense": I can tell if something is ugly or beautiful but I can't make
something beautiful. Ugly yes. That's where Bootstrap came into help: it gave
me reasonable defaults that customers without designers are OK with.

Customers with designers often end up with a custom Bootstrap theme. I can't
remember the last time a designer sent me a totally custom layout not based on
some framework, usually Bootstrap.

~~~
notheguyouthink
I'm really liking SemanticUI, but i'm thinking of switching to BootstrapV4 in
the near future. The main reason being that Bootstrap has such a long history
of tons of developers using it. Lots of devs mean lots of themes,
documentation, etcetc.

My only concern is going with V3 or V4. I'd like to use V4, but that puts me
at a lack of themes/etc, which is basically the same spot i'm at with
semanticUI.. feels like a no gain then.

------
wietze
Bootstrap V4 introduced spacing utility classes (like a class m-t-1 to get
margin-top: 1rem!important), which inspired others to create this great
universal.css project:
[https://github.com/marmelab/universal.css](https://github.com/marmelab/universal.css)

~~~
resoluteteeth
I was terrified for most of the way through that page that it was serious.

~~~
err4nt
The first time I saw this project I went on an emotional roller coaster from
shock & horror, through to laughing until tears fell out of my eyes :)

------
JoshGlazebrook
Which was announced over a year ago and the project is still in alpha... Not
to mention v3 is no longer officially supported.

~~~
yellowboxtenant
Where do you see v3 is no longer officially supported?

This is from their blog when they announced Bootstrap 4

"When we shipped Bootstrap 3, we immediately discontinued all support for
v2.x, causing a lot of pain for all our users out there. That was a mistake we
won’t be making again. For the foreseeable future, we’ll be maintaining
Bootstrap 3 with critical bug fixes and documentation improvements. v3 docs
will also continue to be hosted after v4’s final release."

~~~
tickthokk
[https://github.com/twbs/bootstrap/issues/20631](https://github.com/twbs/bootstrap/issues/20631)

Essentially they've stopped working on v3. I don't think they used the words
"no longer supported", but that's kind of what has happened.

~~~
michaelcampbell
I'm not sure "no more forward feature development" translates to "no support".

~~~
metamet
It seems that V3 is mature enough to not need daily PRs to fix bugs.

------
tedmiston
Suggestion: Change headline from "Bootstrap 4.0 includes a powerful mobile-
first flexbox grid system" to "Bootstrap v4a6 uses flexbox by default".

I feel this much better conveys the meaningful change that HN is discussing
here and that's otherwise not mentioned clearly on the current link to the
docs (vs the blog post linked by another user below).

~~~
dang
Ok, we've added "now used by default" to the title above.

~~~
tedmiston
Thank you, dang!

------
nailer
If you're using flex - particularly if you're using flex by default, what does
bootstrap get you, asides from putting a bunch of visual styling:

    
    
      <div class="row justify-content-md-center">
    

into your HTML?

~~~
ZeroGravitas
An ecosystem of attractive looking templates, devs who know how to use it,
various tools that integrate or output it, examples and tutorials to learn
from, code samples to re-use etc.?

There's also a justification for the type of classnames you're railing against
here:

[http://nicolasgallagher.com/about-html-semantics-front-
end-a...](http://nicolasgallagher.com/about-html-semantics-front-end-
architecture/)

I believe Bootstrap adopts many of these ideas. So it's not just a mistake,
but an intentional decision as part of a different paradigm. Feel free to
suggest that it's not a useful way to build websites, but don't be fooled into
thinking they've accidentally broken a rule they intended to follow.

~~~
nailer
I'd argue more developers know how to use flex than bootstrap right now. And
many developers would spend additional time researching how to do things the
bootstrap way. If you don't have developers and want templates, use
Squarespace, bootstrap is a poor fit.

I've read the article, but I still don't see why, to change the login box, I
need to modify two places (HTML and SCSS) rather than one (SCSS).

~~~
ZeroGravitas
There's a wide range between using Squarespace, and building an entirely
custom website from scratch. It's a big 'ole niche that Bootstrap and other
similar systems have been filling for a while. There's even a reasonably sized
trend of big apps who think they're too good for Bootstrap but basically
implement an internal clone of it.

[https://design.atlassian.com/product/components/buttons/](https://design.atlassian.com/product/components/buttons/)

As to your question, if you have an actual design system in place then you can
change all primary buttons on your site by only changing the SCSS, and if you
want to add a new primary button, or a small button, or a small primary button
etc. you can do so by only changing the HTML. And when you do need to do both,
it splits some of the responsibility in ways that make the code easier to
manage and develop.

If it really comes down to just wanting to do stuff in one place, then there's
a bigger picture that's being missed. Think about distribution of
responsibility and letting junior staff add buttons, while more senior (or
just those with different kinds of expertise) staff control the styleguide. If
they each re-invent the wheel then there's not going to be consistency or re-
use.

~~~
nailer
> There's a wide range between using Squarespace, and building an entirely
> custom website from scratch. It's a big 'ole niche that Bootstrap and other
> similar systems have been filling for a while

Good point.

> There's even a reasonably sized trend of big apps who think they're too good
> for Bootstrap but basically implement an internal clone of it.

Everyone should have a set of rules implemented in SCSS. They just don't need
to implement them in HTML.

> As to your question, if you have an actual design system in place then you
> can change all primary buttons on your site by only changing the SCSS, and
> if you want to add a new primary button, or a small button, or a small
> primary button etc. you can do so by only changing the HTML.

Buttons are an easier case because they already exist. Anything else - avatar
images, login dialogs, etc, are an argument for not using Bootstrap (or BEM,
or other HTML based systems)

\- Making a design system in SCSS only: to change the login box, change the
SCSS for .login-box

\- Using bootstrap: to change the login box, add and remove whatever HTML
visual classes bootstrap needs for your new login box look (is it
'\--grid-l4-left-blah-shiny') then modify the SCSS

(Edited this a lot while I wrote it, kind of thinking aloud and have trouble
reading in monospace)

~~~
ZeroGravitas
Regarding --grid-l4-left-blah-shiny, bear in mind that some people, say users
of a corporate CMS maybe, simply do not have access to the CSS for the page
they are designing. For those people, very granular visual styles have an
important use case. This is however something that can be abused, and I've
seen people who don't "get it" create problems for their future selves by not
understanding when and where to use those kind of classes.

On the other hand, your login box is a box, and presumably you have other
boxes, a sign-up box perhaps. You may well want them to have some similarity,
even on an infrastructure level that is invisible to the user, like
consistently only having margins on the top or the bottom. That kind of thing
can be provided by the design system out of the box, letting the person who's
hooking up the login on the backend have something functional and ready to go
with no delay, to later to be handed off to someone who makes it bounce around
on mousover and look snazzy. And if other priorities get in the way, then
you'd still have a basic foundation level box that wouldn't embarrass you
until you get around to redecorating.

~~~
nailer
> some people, say users of a corporate CMS maybe, simply do not have access
> to the CSS for the page they are designing.

Agreed, but that's an edge case caused by mismanagement. People who need to
style things should be able to edit styles.

> You may well want them to have some similarity, even on an infrastructure
> level that is invisible to the user, like consistently only having margins
> on the top or the bottom. That kind of thing can be provided by the design
> system out of the box

Sure, but you can make consistent margins on your boxes with a SCSS mixin.
It's the same difficulty to set up than moving your site to bootstrap, and
much less difficult to maintain.

------
overcast
I've always built interfaces by hand, but for a recent project that is going
to be heavy on the use of selecting options/button/etc, I was considering
Bootstrap for the first time. However, looking at the source, and the sheer
amount of "stuff" in there, I'm just not too keen on it. Is there a much
lighter alternative, that satisfies quick standardized UI creation? SemanticUI
i saw mentioned in here.

~~~
oliwarner
I agree but still use Bootstrap. There's too much well-thought out stuff to
ignore or attempt to reinvent.

I don't include bootstrap.min.css though. I wrote a custom LESS (I'm still
using v3) stylesheet to replace bootstrap.less, which pulls in just the bits I
want. I also use this to customise and theme the whole thing.

I also don't use Bootstrap's classes in my HTML. These are replaced in my
custom version by semantic and descriptive things that work very well on a
site-by-site basis for keeping markup low.

And this can be kept just-about-separate-enough from Bootstrap to make
upgrading it not too traumatic, as long as you stay within the major version
and don't edit the original files (just override or replace them).

Wrapping up just the bits of the Bootstrap JS is the harder challenge IMO but
this can also be done. I have a plaintext file that lists the files (in order)
that I just cat together, minimise and compress.

Here's my personal blog as an example:
[https://thepcspy.com/](https://thepcspy.com/)

------
scotchio
Flexbox is great but auto adjusting/sizing columns are a real PITA if
responsiveness (@meda query) is tied to the viewport and not the parent
container element.

Would be really cool if Element Queries were a normal thing.

[http://elementqueries.com/](http://elementqueries.com/)

------
swanson
Perhaps I'm a "bad web citizen" for not wanting to go mobile first with
responsive design, but most of the work I've done over the past 5 years for
clients has been "desktop first", fixed-width web applications (with native
mobile apps or separated mobile views if applicable). It's hard to do
responsive right and it costs real time and money for what is, sometimes, only
a theoretical use-case.

And for that, the Bootstrap grid has become slightly worse ever since v2 as
the media-query stuff gets more and more exposed on the public API.

~~~
simonw
Check your analytics. Many sites are now seeing more traffic from mobile
devices than desktop devices - the switchover for your sites may have happened
in the last six months. Desktop first is making less and less sense.

------
feketegy
I find that foundation's flex grid system is much more simple and powerful to
use...

I think bootstrap stagnated too much and they just trying to play catch-up
now.

~~~
mercer
Could you elaborate on that? I've used Foundation before, but never got to use
Bootstrap, but the latter seems to be more popular so I considered using it
for a future project.

------
chrismbarr
Why is this at the top of HN right now? It's still in alpha. It's a good alpha
and I've been using it on some projects, but I think some people might be
mislead that this is the final release with the "4.0" in the title.

The most recent version is alpha 6, and it sounds like they are shooting for
their first beta version next:
[http://blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6/](http://blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6/)

~~~
StevePerkins
> Why is this at the top of HN right now?

Because since being posted, it's averaged one upvote every 26 seconds and one
new comment every 2 minutes, and that's more or less how the ranking algorithm
works?

Relax, it's HN... it'll be gone in a couple of hours.

------
tmaly
I am using bourbon.io for the flexbox grid system. My final css compressed is
less than 4k for the whole site.

~~~
kowdermeister
They will have a SASS API, you can use the Bootstrap mixins and have a
similarly small footprint.

~~~
petetnt
You can just include the grid system alone [1] right now if you want to right
now:

    
    
      @import "path/to/bootstrap/scss/bootstrap-grid"
    

[1]
[https://github.com/twbs/bootstrap/blob/v4-dev/scss/bootstrap...](https://github.com/twbs/bootstrap/blob/v4-dev/scss/bootstrap-
grid.scss)

[https://github.com/twbs/bootstrap/blob/v4-dev/scss/bootstrap...](https://github.com/twbs/bootstrap/blob/v4-dev/scss/bootstrap-
grid.scss)

------
WhitneyLand
Is it a good choice to use this for layout in a React web app?

I'm just now ramping up on React and have noticed two schools of thought:

1) Flexbox abstractions are great and make things easier

2) Flexbox abstractions are bad because they just hide the real flexbox and
prevent you from learning an important widespread standard.

There are React flexbox components out there with both of these viewpoints.
Personally I'd like to find out whatever is most canonical for React, so my
code can be widely accepted.

------
intrasight
I will shortly be starting a new project and was hoping to use Bootstrap 4.
The problem is that a big component of the Bootstrap value proposition is the
themes and controls - both commercial and open source. And the frameworks are
built on top of these themes and controls. It will likely be many months
before this long dependency chain has migrated to V4.

------
franciscop
If you want to try a flexbox grid system today you can use Picnic CSS, we've
been including it for a couple of years now:

[http://picnicss.com/documentation#grids](http://picnicss.com/documentation#grids)

The syntax is slightly different from Bootstrap though

------
turblety
Obviously the most important question though. Will it work in IE8?

*sarcasm intended, with some unfortunate seriousness

~~~
akmittal
Let it die.

Btw they dropped IE9 also

>It comes at the cost of dropping IE9 support, but brings significant
improvements to component layout, alignment, and sizing.

~~~
mathw
Sadly some companies still have to support IE8 for the sake of some of
their... umm...

...less technologically enthusiastic customers.

~~~
akmittal
I wish More had "Courage" to say 'we don't support IE8'

------
reustle
Here is the alpha 6 release blog post from a few days ago

[https://blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6...](https://blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6/)

------
Kiro
What exactly is the benefit to the grid system in Bootstrap 3? Looks the same
to me.

~~~
rbg246
Simplified answer:

Biggest one benefit is the ability to align vertically and center vertically

------
ishaanbahal
One might write their own grid system while waiting for bootstrap 4, a year
now...

~~~
chinathrow
To be fair: Versions up to 4 also had a grid system.

~~~
ishaanbahal
flexbox based grid I mean :P

------
greenspot
Ok looks good but what if I don't like to use Sass but want use Stylus?

(Serious question)

~~~
kowdermeister
You are toasted. It's like asking what if I like wordpress but I don't like
PHP? Can I use wordpress with Ruby?

~~~
greenspot
I thought Bootstrap is about frontend being backend-agnostic or what do I
miss?

~~~
risratorn
I think you have some things mixed up, Bootstrap is a front-end layout
framework built with a CSS preprocessor, in this case SASS. It's got nothing
to do with backend.

You are asking if you can use a different preprocessor, for which the answer
is 'no'.

~~~
scardine
I think the answer is "yes" for those willing to use a fork. If your favorite
preprocessor is popular I bet someone already made one.

------
saosebastiao
Does 4.0 still depend on jquery? I've wanted to use bootstrap for a while, but
every time I mix jquery with react, I end up with a buggy shit sandwich.

~~~
samch
Yes, it does. In the Grunt config file they use to build the package, they
specify jQuery version >= 1.9.1 and less than 4.0.0.

Source:
[https://github.com/twbs/bootstrap/blob/v4-dev/Gruntfile.js#L...](https://github.com/twbs/bootstrap/blob/v4-dev/Gruntfile.js#L46)

------
moomin
It may be just me, but none of my browsers actually seem to render the example
grids correctly... (Chrome does better than Firefox)

~~~
TomMarius
What problems are you facing? It renders correctly in my latest Chrome.

------
andreash
The pages doesn't tell how it differs from other flexboxed based css
frameworks?

~~~
taspeotis
It's the manual, not marketing copy.

------
k__
what's the size of Bootstrap4? is it smaller than 3? is it more modular?

If it was half the size, or more modular, I'd be sold even without new
features :)

~~~
onion2k
Download the bootstrap source, open /scss/bootstrap.scss, comment out the
features you don't want to use, and rebuild it. Completely customisable and
much smaller.

~~~
k__
Good point.

Does this integrate well with tools like Webpack?

For example, if I want to use a container class, can I do something like:

    
    
        require('bootstrap/src/container.sass')
    

and be done with it?

I guess I would probably need to require some core sass files somewhere at the
top of my application, but besides that, is it possible?

~~~
slig
Yes, it does. I'm currently using. It's a little tricky as you have to use
postcss-loader as well (along with sass-loader).

~~~
k__
Very cool :D

What's the tricky part?

I would probably simply get the bootstrap npm package, sass-loader and try to
check which sass files of bootstrap I need to require.

~~~
slig
I did exactly what you suggested, and the tricky part was figuring out postcss
was needed as well.

~~~
k__
for what exactly?

~~~
slig
For adding prefixes to older browsers.

------
myf01d
Bootstrap is useless except for simple static websites. I am not here to start
a flame war but I think Bootstrap has no future unless for beginners and very
simple projects. For jQuery based frameworks, I recommend Semantic UI.

~~~
StevePerkins
The thing is... I would say that UIkit is better, and there's some other guy
at the bottom of this thread getting downvoted into oblivion for saying the
same thing about Material Design.

Momentum is a pretty powerful thing.

And at the end of the day, ALL of these frameworks are pretty much limited
crutches for appdevs who aren't that great with CSS. They have more in common
than they have separating them.

~~~
myf01d
With Semantic UI, you can control every single parameter, remove useless
components, and you can add/override rules without messing with/modifying its
files.

~~~
StevePerkins
You know what else can do that? Writing your own CSS in the first place, no
more complex than it needs to be. :)

I tend to rank these things on a balance... of having the functionality that
I'm likely to use, versus simplicity and learning curve of the functionality
that's there.

So I like UIkit for side projects because it has a lot of built-in components
that Bootstrap makes me find external plugins for (e.g. datepicker), and
doesn't have a lot of Bootstrap crap that I never use (e.g. jumbotron, wells).
It looks great, doesn't have any kind of complex "build system", and takes a
few hours to learn. If I wrote a webapp that turns into the next big thing,
then I'd have a real web designer redo the static stuff anyway.

~~~
myf01d
Of course you're right, I was talking more about serious projects run by a
very small number of people (1-3), and under very limited timespan and budget.
Companies won't need css frameworks anyway in most cases.

------
Numberwang
Material design is better. This project is not needed anymore.

