
Bootstrap 4 Beta - jdorfman
https://getbootstrap.com/
======
inertial
I've been using bootstrap 3 for most of my public projects for a few years and
bootstrap 4 for some internal projects. I make it a point to try new & popular
CSS frameworks every few months and ultimately thank God for bootstrap. It has
stood the test of time for all these years.

Things that I like about bootstrap are : stability, performance, easy custom
builds, community support (almost every problem has been addressed on
Stackoverflow), ecosystem (themes, extensions, tools). The design out of the
box might look cookie cutter, but if you know basic CSS, it is very easy to
customize it with minimal effort. Just lookup examples on
codepen/stackoverflow.

Some people complain about bloat but this is amazing :
[https://getbootstrap.com/docs/3.3/customize/](https://getbootstrap.com/docs/3.3/customize/)
. I have public facing websites with thousands of visitors per day. The
performance rating is better than 90% of the websites.

Truly want to thank @mdo @fat @cvrebert and the rest of the team for this
amazing project.

~~~
philliphaydon
I had been using bootstrap for a while until I found
[http://bulma.io](http://bulma.io) now I can't stand bootstrap.

Still bootstrap has been amazing over the years.

~~~
inertial
I've been watching bulma and it's definitely promising. Would you care to
elaborate what are the things that you "can't stand" with bootstrap ?

After having used bootstrap for so long, I understand it's strengths &
shortcomings quite well. I feel there's little to complain with bootstrap, and
little to gain by ditching it. Would love to be proved wrong.

~~~
rdsubhas
Unless you're using bootstrap components as-in-the-examples in the same
context and elements, they work fine. But try using them somewhere, like an
input or button in a table cell, or card in a grid, etc - and you'll spend an
eternity of "unsetting".

Basically bootstrap is not composeable. It provides not just a set of styles -
but also a severely restricted visual design. People quickly run into elements
that bootstrap was just not designed to be placed into. That's why there are
so many forks/extensions of bootstrap, like bootstrap-admin and so on.

So its good to start with and follow the official style guide. But doing
anything more, and the restrictions immediately bubble up. And then you
quickly run into an entirely different set of problems on organizing your own
CSS, like using SASS, BEM, etc.

Its not a question of OOCSS vs BEM, but more of how _tolerant /accomodative_
the framework is in using it in different elements and contexts. Bootstrap's
tolerance is relatively low compared to most other frameworks.

~~~
SippinLean
How is Bulma different in that regard?

BS4's modules and components are highly portable and work in pretty much any
context. I don't see how offering a theme customization tool results in a
"severely restricted visual design", it allows the freedom to make any visual
design you want. BS4 is MUCH more than visuals/UI.

------
shubhamjain
I highly recommend UIKit [1] for anyone looking to pick a front-end framework.
It solved tons of design problems that I faced with Bootstrap. Here are a few
—

1) Every class name is prefixed with "uk-": a wise decision to avoid conflicts
and make it easy recognise the framework classes.

2) Useful generic classes: UIKit has many helper classes to avoid adding
another rule—for removing padding, introducing a small margin, rounding the
borders, adding a box shadow.

3) Clean theme: The default UIKit theme looks an order of magnitude better
than Bootstrap's.

4) Additional helpful components: Loading spinner, Cards, Notifications,
Sortable list. Shipping them by default saves a lot of time in searching and
integrating them in your application.

5) Default Icons Support: The icons look clean and beautiful and because they
are SVG, they don't require a font file. (Although, requiring Javascript can
be turning off for some)

6) Much better components: Try creating an input box with an icon in
bootstrap; with UIKit it only takes a little markup.

Whenever I develop with Bootstrap, I have to spend half the time muting the
existing styles and introducing new ones. With UIKit, it never felt like a
problem.

[1]: [https://getuikit.com/docs/](https://getuikit.com/docs/)

~~~
mdo
1) There are tools to do this for you in any project :).

2) Bootstrap 4 includes dozens of utilities like these and more. Still have
some to add, but there are tons.

3) Our theme state is busted in the beta it will be there for final. Open to
feedback!

4) v4 has cards. Spinners are slated for v4.1. Toasts are slated for v4.2 I
think. Peep the project pulls page :).

5) Everyone else does amazing icons. We pulled our icon font out long ago in
v4. Use any SVG library.

6) That’s a solid idea. Care to open an issue for it!? :D

Take a look at the new v4 beta docs and let me know what else is missing or
cumbersome for you, please. <3

~~~
acdjuiamadfn
If he takes a look at v4 beta than ui-kit creator will ask him to look at the
next beta. This is an endless cycle. I think he's comparing against 3 which is
valid. And from your replies, it looks to me like he's right on all counts.

------
mdo
It’s past midnight by me and I’m heading to bed, but I’ll pop back here
tomorrow to answer questions and follow up with folks. Thanks for the kind
words so far, and any and all feedback coming our way :).

Huge thanks to the contributors and our team for pushing so hard recently.
Feels amazing to have a beta out finally.

~~~
jameskegel
Hey there, thanks for your project. I look forward to the release.

------
lewisl9029
A few questions for those who might be using component-oriented CSS-in-JS
libraries like styled-components [0] or glamorous [1]:

1\. Do you still use a global, class-based, cascading CSS framework like
Bootstrap, Semantic UI, etc, to provide baseline styling/theming for your
pages and components? And if not, do you just essentially roll your own custom
CSS framework in JS? Or are there styling frameworks out there that don't
cascade and can compose more naturally with component-oriented approaches to
styling?

2\. If you do use cascading CSS frameworks in addition to something like
styled-components, what are your approaches to limiting the unpredictable
side-effects of cascading styles, dealing with specificity and load order
issues, and ensuring proper style isolation inside your components?

It seems like using a cascading styling framework could defeat much of the
purpose of using a well-isolated component-oriented styling library.

Although on the other hand, the alternative of writing all styling on my own
seems like a futile exercise in reinventing a vastly inferior wheel, since so
much designer talent has been poured into projects like Bootstrap to the point
where an amateur designer like myself could never even approach the same level
of polish, flexibility and consistency in their designs.

I'm hoping someone here could enlighten me on a better approach that takes the
best of both worlds, or at least share a middle ground they're happy with?

[0] [https://github.com/styled-components/styled-
components](https://github.com/styled-components/styled-components)

[1] [https://github.com/paypal/glamorous](https://github.com/paypal/glamorous)

~~~
SirHound
1\. No frameworks, but there's an `injectGlobal` escape hatch with styled-
components that I use for a CSS reset. We're transitioning from a class-based
approach and the two are working together quite neatly.

2\. This hasn't been a problem. Most of the global styles are based on tags,
and classes are already more specific. The legacy class-based stuff is all
hash-based too, so there's been no conflicts.

So far I'm enjoying the component-based approach. Render functions look much
cleaner and you abstract logic that might have previously looked like

    
    
      classnames(styles.btn, {
        [styles.active]: isActive
      })
    

to

    
    
      ({ isActive }) => `background: red`
    
    

Which lives in a totally different file.

On one hand I don't think I've done enough to reuse styles across components
but on the other hand I know I'm never loading styles that aren't used
specifically for the current render.

------
reificator
I think Web Reflection covers my concerns with Bootstrap more elegantly than I
can myself. It's 2017, the browser targets are very modern, so why does it
need jQuery at all?

[https://www.webreflection.co.uk/blog/2016/04/22/about-
jquery](https://www.webreflection.co.uk/blog/2016/04/22/about-jquery)

~~~
mdo
We'll be working on moving on from jQuery. When we finally decided to commit
to it, it was too late in the v4 alpha process to really spend significant
time doing it. We'll be piece-meal updating our plugins to drop it.

Lots of folks like to shit on jQuery these days, but it changed JS forever.
We're still using it while focusing on other things, and you can easily swap
it out for something else or use a ported version of our JS for React,
Angular, etc.

In short, yes, and we'll get there in time <3.

~~~
reificator
That's great news!

I don't particularly aim to shit on it, but I've been on the vanilla train for
awhile now. So when I see something I'd like to try out to solve a specific
problem, having it pull in jQuery for a dependency is kind of frustrating.

Especially when (and I'm sure Bootstrap does more with it) the only reason
it's pulled in is to replace document.querySelectorAll and fetch/xhr.

------
eCa
The blog post:
[https://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/](https://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/)

------
tannhaeuser
A big thumbs up and thank you to the Bootstrap team.

Building Bootstrap 4 from source (which is what you want to do for your own
themes and customizing) requires a somewhat hefty npm install due to babel,
autoprefixer/postcss _and_ clean-css, and in particular due to node-sass which
is using libsass/node bindings, thus requiring gyp and Python. I'd imagine a
leaner setup based on a precompiled sassc binary for SCSS processing could be
useful.

~~~
STRiDEX
node-sass uses precompiled binary unless you're on a version of node that
hasn't had a published binary or one of the few other reasons.

------
tannhaeuser
It's probably not the right time and place to ask, but have there been
considerations for post-Bootstrap 4 yet? I could imagine CSS grid and CSS
variables will reduce the need for sass/less in the future. So it might make
sense to look into whether the CSS abstractions build into BS 4 will hold up
well in the presence of CSS grid/vars, or have their design informed
by/aligned with these upcoming features.

~~~
mdo
Probably gonna stick with some Sass stuff for awhile, tackling components and
JS behaviors we haven’t done in the past. There’s some major stuff we’re
missing even before CSS grid layout (which doesn’t have super great support
today).

~~~
technojunkie
To the contrary, CSS Grid Layout has excellent support. All modern browsers
aside from Edge. For Edge, IE11, and IE10, you can use the original Grid spec
since it's frozen in time and can replicate most of what Grid can do today,
albeit it's more complicated and explicit.

Considering Bootstrap does not support the same browsers that CSS Grid does
not work in, this argument doesn't stand.

[http://caniuse.com/#search=grid](http://caniuse.com/#search=grid)

If you look through the stats of every unsupported browser in the list above,
almost all of them are %0.x. Adding them all up still gives you single digits.
And with Flexbox as a fallback, you're covering virtually all modern browsers.

I really hope you consider adding this last feature to Bootstrap 4 as I truly
believe it will be worth the effort.

------
harel
I cannot recommend Semantic UI enough, and in particular the React port of
Semantic. Its a very complete, themable and quality piece of toolkit. After
using it I could not understand why I've been using bootstrap before.

[http://semantic-ui.com](http://semantic-ui.com) [http://react.semantic-
ui.com](http://react.semantic-ui.com)

~~~
matt4077
I'd recommend neither. CSS has caught up, and the two large problems that
these frameworks solved no longer exists: grids, and differences between
browser implementations.

Additionally, semantic UI deserves the scorn of a thousand linguists for the
most misleading (unsemantic? or even antisemtitic?) product name ever: there
is nothing semantic about class="col-xs-12 col-m-3 col-x-1"

~~~
UK-AL
For a backend developer, I find bootstrap and Semantic UI brilliant.

I mean I can write CSS from scratch and make it responsive, but it generally
looks awful without having a designer.

But using bootstrap I can use a default layout, and the default components and
it looks respectable.

------
DigitalSea
For anyone wondering, the beta is comprised of 392 Github issues:
[https://github.com/twbs/bootstrap/milestone/41?closed=1](https://github.com/twbs/bootstrap/milestone/41?closed=1)
with some more interesting tidbits in this issue here:
[https://github.com/twbs/bootstrap/issues/21568](https://github.com/twbs/bootstrap/issues/21568)
\- good to see Bootstrap finally leave alpha after so many years, the grid
system is fantastic. Congratulations to everyone who contributed to Bootstrap
to make this happen, solid work.

------
cunningfatalist
I like how minimal Bootstrap 4 is. I also like the SCSS core itself. It's very
well written and I learned a lot from reading it.

I worked with Foundation 5 + 6, Semantic UI, Spectre, Bulma and Bootstrap 2 +
3 (and some more lesser known Frameworks) and I must say that the Bootstrap 4
team really nailed it. All the other frameworks are good, but this is just
great to work with.

------
_Codemonkeyism
Switched from Bootstrap to Semantic some time ago. I like it more, but
development seems to be very very slow.

Took a look at Foundation, and the new XY Grid is really really nice and much
better than the current Semantic grid.

[https://www.youtube.com/watch?v=Xl5DjEzKn1g](https://www.youtube.com/watch?v=Xl5DjEzKn1g)

I especially love

1\. It also works for Y 2\. how you specify responsive, "small-4 medium-6
large-2" means on small devices 4 wide, on medium 6 and on large 2 wide. This
makes layouting responsive much easier.

~~~
SippinLean
That would be "col-sm-4 col-md-6 col-lg-2" on Bootstrap with similar results.

~~~
_Codemonkeyism
Didn't know, was that also in bootstrap 2? Perhaps it's time to come back.

------
paradite
I am shocked to see that font awesome isn't even mentioned as a choice for
icons considering its popularity:

[https://getbootstrap.com/docs/4.0/extend/icons/](https://getbootstrap.com/docs/4.0/extend/icons/)

Then again I am equally shocked that there are so many competing icon sets
that look promising.

~~~
SippinLean
I don't think they are offering SVG versions of their icons until the next
version, and BS4 is moving away from font (non-SVG) icons, thus their
exclusion.

------
dgut
I've been using BS 4 Alpha for a while now, this is great news. A million
thanks to mdo and the rest of the team.

------
Matheus28

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    

The css given in their docs has an invalid integrity hash

This is the correct hash:

    
    
      sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M
    

Edit: someone has already filled an issue, beating me by 3 minutes:
[https://github.com/twbs/bootstrap/issues/23284](https://github.com/twbs/bootstrap/issues/23284)

~~~
mdo
Fixed! Sorry about that :).

------
batmansmk
We love the alternative [http://tachyons.io/](http://tachyons.io/)

Functional CSS helps us maintaining large scale component-based project fairly
easily. You have to know CSS though.

~~~
SippinLean
I wouldn't really consider it an alternative. It's essentially inline styles.

Useful for marketers or authors without coding experience to build pages
within a restricted CMS (they can't edit all the code, but they can add
classes to components).

Most of it is not components, though; most classes are just a single CSS
property and value. This easily bloats into a maintenance nightmare:

    
    
        <footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
    

...it's the reason we moved to modular CSS instead of having a style attr on
every element.

It has its place, but something like Foundation is more appropriately
considered an alternative to Bootstrap.

------
ShirsenduK
Have been using Bootstrap 4 on production at
[https://www.maplenest.com](https://www.maplenest.com) for almost a year now.

It has Flexbox!!! Although our team has added additional classes to get some
of the UI done, I am sure, we could have done it using only Bootstrap. We get
lazy :P.

The primary reason I like Bootstrap is because of the semantics. Columns are
col, Tables are table, Cards are etc. Primary is main action, Danger is error
etc. etc. As they say in UX, "Don't make me think!"

------
huskyr
I heavily used Bootstrap 2/3 in projects before, but the last two years or so
i really don't need such a large CSS framework anymore. Especially with all
major browser supporting Flexbox grid-like layouts have become so much easier.
Nowadays i just use SASS and a really small mixin library (1) and i'm
perfectly happy.

1: [http://hay.github.io/valenski/](http://hay.github.io/valenski/)

~~~
mdo
Hey, that's awesome! Reminds me that Bootstrap started over six years ago from
a Less variable and mixin library
([http://getpreboot.com](http://getpreboot.com)).

~~~
huskyr
Interesting, i didn't know that! I guess my little library will probably will
be a large framework six years from now then ;)

------
pan69
Love the new revamped form layout and possibilities. Can't wait to start using
BS4.

Congrats and a massive thanks to anyone who has been working on this fantastic
project.

------
hbcondo714
Is the new 'tooltip with HTML' feature SEO-friendly? Wouldn't the HTML markup
obscure the text?

    
    
      <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
    

[https://getbootstrap.com/docs/4.0/components/tooltips/](https://getbootstrap.com/docs/4.0/components/tooltips/)

------
jaequery
does bs4 now have an easy way to add spinning icons to a button?

in bs3, there was no easy way, you had to basically use javascript to achieve
it.

<button class="btn btn-default btn-spin">Click Me</button>

I been waiting for something like this to be achievable for some time now.

Bulma has this perfected and it really is handy.

~~~
mdo
Spinners are coming in 4.1:
[https://github.com/twbs/bootstrap/pull/22960](https://github.com/twbs/bootstrap/pull/22960)

~~~
jaequery
Sweet, thank you. Hopefully it is out sooner rather than later.

------
fzaninotto
The advent of utility classes signs the doom of Bootstrap. Going down this
road leads directly to universal.css
([https://github.com/marmelab/universal.css](https://github.com/marmelab/universal.css)).

------
yuchi
That version dropdown in the navbar will change my life: I give lessons for a
framework which in the previous version still used v2.3.2, now I’m sure my
students will not look at the wrong documentation.

------
k__
With Flexbox and Grid I found less and less reasons to use Bootstrap.

~~~
SippinLean
You'll be happy to learn, as mentioned on the linked page, that BS4 is
rewritten from the ground up with Flexbox, then.

I personally don't work on any sites small enough to ignore all the browsers
without Grid support yet.

~~~
k__
at the moment I'm luckily doing React-Native stuff. Feels like doing
web/phone-gap stuff but without the need of (old) safari webviews, he he.

------
tmaly
I originally used bootstrap 3 for my food side project. I did have some issues
with customizing and sheer size.

I eventually moved over to bourbon.io with the help of one of the core
contributors.

------
calgaryeng
Bootstrap is great and I used it on a couple projects. Unfortunately I gave up
waiting on a V4 release and started using Semantic UI. This has been a long
time coming!

~~~
manigandham
+1 to semantic UI, very well designed and more customizable, although their
build process is more complicated.

------
champagnepapi
I haven't used bootstrap 4, I've actually kinda moved away from Bootstrap
(which I've used in a couple production products) for Semantic-UI.

------
aaronbrethorst
awesome, congrats to everyone who's worked on this. It's been a long time
coming, but I imagine it will be very well worth it.

------
zspitzer
Anyone got a working requirejs example? does it need a special shim

I'm getting a "Bootstrap dropdown require Popper.js" error

------
microkernel
Frequently prototyping sites and always amazed how much value bootstrap adds.
Thank you for all the work done!

------
Kiro
Is it safe to start using in production?

~~~
petetnt
FWIW we have been using Bootstrap 4 in production since early days of rolling
out the v4-dev and we have had minimal troubles of upgrading it in various
tons of projects.

------
matude
Personally prefer Foundation but glad to see Bootstrap maturing from the
eternal alpha version. :)

------
danvoell
Can anyone comment on what is new? What to try in 4?

~~~
cwackerfuss
[https://blog.templatetoaster.com/bootstrap-4/](https://blog.templatetoaster.com/bootstrap-4/)

The thing I'm most excited about is the flexbox grid.

------
ak39
Many folks use Bootstrap for its awesome grid system. But now that CSS Grids
are finally here and are way way cleaner to use, Bootstrap's days are
numbered.

~~~
SippinLean
You know that BS is much, much more than a grid right?

------
sadlion
What does HN think about zurb foundation?

------
knodi
$99 for such simple themes is overpriced

------
davidgatti
Nice redesign! :)

------
rawoke083600
Nice :)

------
jbob2000
I love how you have ads in the documentation! So helpful!

What's next, ads in the source code?

