Bootstrap 4? Anyone?

Hi everyone, I am curious if anyone here is using or plannign to use Bootstrap 4 in production?

Blaze or React? Do you utilize existing packages/libraries, components etc, or use the explicit markup?

Are there any gotchas that we all need to be aware of?

Anything missing that’s there with Bootstrap 3 but not ported yet? Alternatives, counterparts?

You know, I’d like to hear about your experience, good and bad, the whole nine yards!



I work on a website (, made with React, that is in production, and it’s using Bootstrap 4.

The main reason for using Bootstrap 4 over 3 was the flexbox, and it has worked out very well. The grid also worked as expected, very similar to Bootstrap 3. We don’t really use any other components.

I installed it by adding the following atmosphere packages:


Hi @birk thanks a lot for the input.

I’m eyeing on bootstrap due to the vast array of components, but if it is just the grid, then perhaps I would use a lean flexbox based grid library.

Why did you not do that?

The package he listed has all of the components, he’s just choosing to only use the flexbox.

@Siyfion hence my follow up question to understand why he prefers bootstrap’s grid and not a grid-only framework, you know, since that’s the only component he chooses to use.

When is it going to progress from an alpha release?

What’s a good grid-only framework that uses flexbox? looks like a popular one!

1 Like

Hi ! Thanks for the feedback. How did you manage to enable flexbox in the meteor package ? It seems that it is not enabled by default. When I write this (from the docs) :
<div className="container"> <div className="row"> <div className="col-xs"> 1 of 2 </div> <div className="col-xs"> 1 of 2 </div> </div> <div className="row"> <div className="col-xs"> 1 of 3 </div> <div className="col-xs"> 1 of 3 </div> <div className="col-xs"> 1 of 3 </div> </div> </div>

I’m only able to get this, which is not at all like expected :

You need to override the $enable-flex SASS variable. See here.

Thanks for the answer. I’ve added $enable-flex: true; in a file called
bootstrap-flex.scss in my project but it doesn’t do anything.

I actually never got that part working - and I just tried for an hour without success, so it is apparently way harder than it should be.

I simply used flexbox directly from my stylesheets, and I expected it to play nicely with bootstrap 4 as it also was made using flexbox. So for your example would I not use col-xs, but simple give them a class and style it using flex-grow.

Humph, that’s odd. Did you add the variable before importing Bootstrap? I’m happy to take a look at your code if you can’t resolve it. I’ve got flex grids working on my in-progress site.