Bootstrap 4? Anyone?


#1

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!

Thanks!


#2

Hi,

I work on a website (www.scienceathome.org), 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:
coursierprive:tether
twbs:bootstrap@=4.0.0-alpha2


#3

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?


#4

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


#5

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


#6

When is it going to progress from an alpha release?


#7

What’s a good grid-only framework that uses flexbox?


#8

https://github.com/kristoferjoseph/flexboxgrid looks like a popular one!


#9

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 :


#10

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


#11

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.


#12

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.


#13

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.