
Bootstrap 4 - jdorfman
http://blog.getbootstrap.com/2018/01/18/bootstrap-4/
======
michaelbuckbee
My first thought when I saw the Hawaii Missile Warning screenshot [1] was "wow
- they really should have used bootstrap".

Add a 'btn' class to those links.

Add the 'danger' class to the links that will send an actual alert and a
'info' class to the ones that are just test.

Obviously there are also about a hundred other things that should have been in
place there, but it is an issue of real consequence that the default styling
and UX options of "plain" HTML are so poor.

1 - [http://nymag.com/selectall/2018/01/hawaii-missile-warning-
se...](http://nymag.com/selectall/2018/01/hawaii-missile-warning-set-off-by-
bad-design.html)

------
pg_bot
Congrats on shipping the new version!

While I don't use it currently, Bootstrap helped me go from 0 design skills to
build non-awful user interfaces. It's hard to overstate the impact they have
had on making the web a better place.

~~~
ryanSrich
Similar experience, but from the opposite perspective. I was a designer, but
didn't know how to code in 2012. Bootstrap was the primary way I learned CSS
and JS. I'm glad it's still around.

------
dwg
For React users I'll point out a great integration library
[http://reactstrap.github.io/](http://reactstrap.github.io/) which supports
Bootstrap 4 when installed with the @next tag. I've been using this for a
while without any issues.

~~~
Kiro
I would love something similar but without CSS files and classes. Something
that makes it CSS-in-JS.

~~~
dwg
Ton of discussion/debate on this topic and there are clear benefits to an
inline style approach, but so far nothing (that I'm aware of) has proven to be
scalable enough to completely take over (yet).

For me a combination of approaches makes the best sense at present. I think of
Bootstrap (or Bulma, etc.) as an advanced "reset/normalize", with the addition
of some useful global variables. A better starting place, if you will. From
there I use the provided class names where it makes sense, and inline styles
for everything else.

For inline styles I often use either styled components or glamorous. However
my experience has been mixed as I also make heavy use of recompose and often
don't have a clear idea which one I want to use to handle dynamic styles. I
haven't done so yet but am interested to try Fela.

------
uses
The ability to use the responsive flexbox classes has been game changing for
me. I can do large portions of a fully responsive flexbox layout with css
classes like d-md-flex and flex-md-row, etc. This drastically cuts down on the
amount of stuff that needs to be in my styles.less or whatever. And it makes
maintenance easier for that reason as well.

To finish the layout I generally am making a few utility classes to control
things like color and spacing (not a fan of the default bootstrap spacing
classes). And then of course custom CSS for navigation, typography and other
misc widgets.

But the bulk of the main layout is handled entirely with bootstrap classes.
And because nearly everything can be specified with the responsive breakpoint
prefixes, I don't have to write repetitive media queries.

------
hmhrex
Congrat Bootstrap team!

I have been really impressed with Bootstrap 4. I've been updating our site
with each beta release. Glad that there are no breaking changes between beta 3
and stable as promised!

------
seanwilson
Is Bootstrap 4 worth using if all you really want are the responsive utilities
and classes? I'm aiming to make pages with less than 50KB of uncompressed CSS.
I don't need all the components Bootstrap has but I find the responsive
utilities and classes helpful.

~~~
gbuk2013
You can pick and choose the parts of Bootstrap you want to use, but you'll
need to compile the SCSS code (very easy).

Assuming NPM install, look at node_modules/bootstrap/scss/bootstrap.scss for a
list of files that are included and pick the ones you need and include them
manually in your project's SCSS file.

Here's a bit from my Makefile (because I love me some Make):

    
    
        SASS        = ./node_modules/.bin/node-sass
    
        %.min.css: %.scss
            $(SASS) \
                    --output-style compressed \
                    --source-map true \
                    --source-map-contents true \
                    $< $@

~~~
tannhaeuser
Bit late, but it's probably easier to use just sassc (the standard SCSS
compiler from the libsass project) rather than node-sass if you don't need
node otherwise (for webpack or whatever) in your build pipeline. Node-sass as
a native linked requires gyp, hence python, node, and a couple npm packages
which add to your footprint considerably.

------
crescentfresh
Is there a resource to get an overview of the difference(s) between v4 and
Bootstrap 3? Speaking as someone who has _not_ been following v4 development.

~~~
blowski
The biggest change I’m aware of is using flexbox.

~~~
merb
they now use different colors and removed panels, wells, etc.. this is pretty
big aswell.

------
mcescalante
I've been writing some interfaces in Angular and Vue (and Bootstrap 4) lately.
Since we don't want to use jQuery with these, here are my personal preferences
for "helper" libraries for these JS frameworks/libraries to work nicely with
Bootstrap 4:

Bootstrap: [https://ng-bootstrap.github.io/#/getting-started](https://ng-
bootstrap.github.io/#/getting-started)

Vue: [https://bootstrap-vue.js.org/docs](https://bootstrap-vue.js.org/docs)

~~~
matthoiland
Vue + Bootstrap 4 + Bootstrap-Vue = Ah yiss.

------
kentosi
Well done to the Bootstrap team!

I'm a little surprised though, that jQuery is still a requirement. I'm
guessing that this might be due to linked JS components that they don't have
permission to modify?

~~~
styfle
I was surprised too.

This issue[0] basically says the team is too small to rewrite and remove
jQuery as a dependency.

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

~~~
petetnt
There's a PR nearing close to jQueryless version:

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

One of the remaining pieces also has a PR:

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

Too bad this didn't land to BS4 though.

------
styfle
Why is this marked as a duplicate? Where is the main discussion happening?

~~~
petetnt
No idea, maybe dang could undupe it? It also fell from the frontpage due to
the tag.

~~~
rhapsodic
_> No idea, maybe dang could undupe it? It also fell from the frontpage due to
the tag._

If you say its OK, I'll flag your post to get dang's attention, and then
unflag it later.

------
paul7986
Besides Bootstrap what frameworks and or tools are the hipsters using for
designing & building web apps & sites instead?

~~~
gbugniot
Brutalist design [http://brutalistwebsites.com](http://brutalistwebsites.com)

~~~
mrisoli
I've seen Brutalist design being mentioned a few times here and it always
shows this website gallery, I am no specialist, so I wonder, is this what
brutalist design really is?

Quick Google search explains that brutalist architecture is about creating
modular elements representing specific functionality often sacrificing
aesthetics.

A lot of the sites on that gallery are ugly just for being ugly, they have no
functionality and use different types of animations or constructs to just make
something unconventional from common website aesthetics, I get why, but it
feels like the word brutalist was borrowed here and is applied in a very
different way.

~~~
brador
Brutalism is features before design. A cement tower block is an example in
architecture. [http://skimfeed.com](http://skimfeed.com) is an example of a
website that follows brutalist ideals. Early craigslist and early search
engines are good examples too.

~~~
mrisoli
I agree and this is what I consider to be brutalist web design, but that
site(the top search result for 'brutalist websites', 'brutalist design',
'brutalist web' and so on) has a bunch of weird designs(such as
[http://www.xtragear.services/](http://www.xtragear.services/) ), which is the
source of my confusion.

------
zhirzh
I respect the fact that the migration guide[1] is detailed and fine-grained

[1]:
[https://getbootstrap.com/docs/4.0/migration/](https://getbootstrap.com/docs/4.0/migration/)

------
rhapsodic
This post has been flagged as a dupe, but the other posting currently only has
6 points and 0 comments, so I think the flag should be remove from this one.

------
eli_gottlieb
Woah, it's finally out? We'd been using the alphas for so long!

------
Pigo
I know it always goes hand in hand with jquery, but I wish there was more info
on using a pared down version that only has the parts of jquery necessary to
run the bootstrap components.

------
jimmcslim
Anyone successfully combining CSS Grid and Bootstrap (for the latter's other
components, typography and styles)?

------
bovermyer
Bootstrap's been a great asset to the community.

For my own projects, though, I've moved to using Bulma instead for baseline
design.

------
0xADADA
Nice!

