Bootstrap 4 | Hacker News Reader

Bootstrap 4

blog.getbootstrap.com

229 pointsjdorfman68 comments

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...

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.

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.

For React users I'll point out a great integration library 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.

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

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.

Should also mention that it's probably just a matter of time, especially given that "mixed" approach doesn't really work in react-native.

Help: in general, should I use http://reactstrap.github.io/ or https://react-bootstrap.github.io/ ?

Both are great. Originally I used react-bootstrap. However I switched to reactstrap to get support for bootstrap 4. Reactstrap is more barebones, which is good or bad depending on your style and needs.

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.

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!

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.

You can strip off the things you don't need using SASS.

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 \
                $< $@

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.

It's a very good builder library with a lot of useful SCSS utilities. You can pick and choose what you want to include in the final output.

It's worth doing this then? Given I'm going to be throwing away 80% of the CSS, I'm curious if there are better libraries I can build on top of. It's always an advantage that you'll be able to easily Google for Bootstrap fixes though.

I'd say go ahead. The nice thing is that you can start with virtually nothing and if you realize later you need really nice widgets, then you can just use those mixins.

Bootstrap is the only framework that looks nice, is responsive, and fully addresses accessibility. The only thing I can fault it for is using Jquery, but I don't use the javascript features, so it doesn't matter (to me) anyway.

You can directly use flexbox or CSS grid now. It's not bad in CSS as it was before.

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.

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

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

http://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/

Detailed list: https://getbootstrap.com/docs/4.0/migration/

Look out for dropped push and pull modifier classes and new breakpoints.

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

Vue: https://bootstrap-vue.js.org/docs

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

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?

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

There's a PR nearing close to jQueryless version:

https://github.com/twbs/bootstrap/pull/23586

One of the remaining pieces also has a PR:

https://github.com/twbs/bootstrap/pull/24879

Too bad this didn't land to BS4 though.

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

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

>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.

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

I started using Pure. https://purecss.io/

Tachyons is pure joy!

http://tachyons.io/

https://bulma.io/ (just on a side-project so far)

i love bulma as Well. it is a no brainer css framework

Tailwind: https://tailwindcss.com Bulma: https://bulma.io

I don't think it rates as "hipster", but Foundation works fine.

https://foundation.zurb.com/

Check out bulma, you wont regret.

What does it offer that Zurb's Foundation don't? I quickly went through their docs and saw nothing new or magic.

maybe it's smaller?

Class names and modifiers are easy to memorize. Small size. Check bulma.io expo. You will see the lovely pages made with bulma

Brutalist design http://brutalistwebsites.com

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.

This is not brutalism. It’s more like dada.

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

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/ ), which is the source of my confusion.

These look like they were made by a Starbucks barista with a graphic design “degree” and 100k in debt. In other words, ugly and pretentious. Yeah I know, I don’t get it.

I like a lot of these but personally bootstrap has inertia going for it.

I have a dozen projects that use Bootstrap and it just feels like a lot of work to change that paradigm now for one solitary project.

22 year old me: "Man you sound old."

"Frameworks and tools" is a very broad category. Check out React, Angular and Vue if you're looking beyond design/CSS.

I've tried MiniCSS[1] (which styles your default HTML without adding too many classes and has themes) and MUI[2] (Material UI styles). Both are decent, but I keep falling back to Bootstrap v4 because Bootstrap just gets a lot of sizing and padding right.

With other frameworks I'm constantly adding new rules just to add a bit of padding and margin here and there, but Bootstrap 4 gets a lot of it right by default. Plus it now has a lot of useful utility classes for small padding increments (e.g. `.mb-3` for `margin-bottom: 1.5rem` and `.px-2` for horizontal padding of 1rem). With Bootstrap 4, a previous project required only 10-ish lines of global CSS[3]. Sure, it looks and feels like a Bootstrap project, but that was fine for the purpose of the app, and Bootstrap 4 looks fresh enough that I don't feel like the design is outdated.

FWIW, I've also had a lot of luck recently with Material-UI[4], a set of React components that implement the Material UI aesthetic. My current project feels like it could fit in with any Google app from G Suite.

[1]: https://minicss.org/

[2]: https://www.muicss.com/

[3]: https://github.com/statico/aspen/blob/master/pages/index.js#...

[4]: https://material-ui-next.com/

I'm a fan of spectre(https://picturepan2.github.io/spectre/getting-started.html).

There is also:

- UiKit - https://getuikit.com

- Bulma - https://bulma.io/

- Sematic - https://semantic-ui.com/

NOTE: I'm not a front end person, have used a couple of these for various personal projects.

Worth mentioning that Semantic has some first-rate React bindings:

https://react.semantic-ui.com/

They're really a joy to work with. My one beef with Semantic is that it could be easier to make themes. I know that someone is currently working on a theme generator site like Bootstrap and hopefully that will be a nice step forward.

I was just looking at semantic-ui-react, and it looked great.

But then I tested their examples on my mobile phone and it looked really bad. It just seemed that it wasn't responsive at all, which really surprised me.

https://codepen.io to search for tips and tricks which you probably never knew you could do more than Bootstrap, Tailwind, Bulma, etc.

Basscss[0] + some add-ons[1], everything you need in ~5Kb.

[0]: http://basscss.com/ [1]: https://github.com/basscss/addons

There's also AntD: https://ant.design/

Check the links at the bottom of that site for more addons (such as this: http://motion.ant.design/)

I really like Tachyons.

Not being tied down to global styles is so nice. The downside though, is that anytime you make something you have to redo all the styles. I find this not to be a huge deal, though since you can just turn them into components.

I’m finding the wix style guide very useful, because it provides baytle tested components for atomic elements (buttons, dropdowns, checkboxes) without imposing an overreaching design on you. (But still provides layout components)

https://github.com/wix/wix-style-react

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

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

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.

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

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.

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

Bootstrap's been a great asset to the community.

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

Nice!

Reply on news.ycombinator.com