Bootstrap 4 alpha is out!


#1

Anyone know the best way to use this in current Meteor projects? (since the twbs:bootstrap package is obviously not 4.x yet)


#2

You could download the source here and then make sure you have fourseven:scss or another way to compile scss files. Then just add the scss files and the js files like you would normally and it should work.

Disclaimer: I haven’t tried.


#3

Too bad it probably won’t be as easy as changing the version number in package.js.

Did you see the new official Bootstrap themes? They’re super nice. And the componentization should work nicely with React.


#4

Yeah, I suppose currently you can just drop the Bootstrap JS & CSS files in the client side and it should work. Just curious if there was some secret Meteor package somewhere. :smile:


#5

I’ve tested this out and grabbing the dist js files and the scss folders from bootstrap and dropping them into the client works beautifully. Of course you need fourseven:scss. Note: there are 4 flavors of bootstrap in the scss folder, standard, flux, grid only, and reset only. Grab JUST the flavor you want and remove the others (or rename them with a leading underscore so that sass doesn’t automatically include them).

I’ve been playing with this all weekend and what I’ve noticed so far is that it is more than a little rough around the edges. If you are making a mobile app or want a mobile friendly website, I’d recommend sticking with 3 for now until they get at least to beta. If you are making a more desktop oriented application, go for broke, pick it up and see what happens!

A lot has changed and it will require a bit of awareness into those changes. Some things are more dramatic than others (bg-color classes for example) while other changes are more subtle but require you to restructure (or even reduce the structure of) your DOM. It really is an alpha build but it is also a very breaking build and what they broke, sometimes leaves you kinda hanging. I’ll keep playing with the alpha because the application I just started with it probably won’t be ready for about 6 months and by then they should be in pretty stable Beta.

This is the time though to make sure that your favorite part of 3 or your most desired change from 3 gets into the list so do play with it and raise issues where relevant so that they know how important it is to ensure that we don’t lose functionality we strongly depended on!


#6

One issue I have found is when a package depends on twbs, I have the source css from BS4A and it is working but being outweighed by the packages twbs that is coming with one or more packages I have installed. useraccounts:bootstrap for example.


#7

Cool. I plan to upgrade it along with Meteor 1.2. Is there a package available for testing?


#8

This is a flaw in the package and should be corrected by the package author. No package should explicitly depend on one other package to provide something if multiple packages available could work. In this case in particular, there are other bootstrap options, so forcing a dependency on the twbs version is actually really bad and should be filed as a bug with that package.


#9

@latitudehopper, actually there’s no dependency on twbs:bootstrap from useraccounts:bootstrap.
See also this section of the official documentation, and it’s always been like this :wink:


#10

Have you guys tried twbs:bootstrap@4.0.0-alpha? It’s been published on Aug 25th :wink:
Lets try run meteor show --show-all twbs:bootstrap

I know it’s a shame it’s not visible from Atmosphere, this is why I opened this issue about one month ago…
We’d need better ways to know about pre-releases for pacakges! :frowning:

In case you decide to try it out, let me know about any problems!


#11

Thanks for letting us know!


#12

looks like 4.0.0-alpha.2 was made available 9th December; no such love for the meteor package.


#13

It’s not a problem with love rather then a problem with spare time and incomings… :wink:

meteor show --show-all twbs:bootstrap
                                            
Versions:                                     
  3.3.1         November 28th, 2014           
  3.3.1_1       December 11th, 2014
  3.3.1_2       December 12th, 2014
  3.3.2         January 26th, 2015
  3.3.4         March 16th, 2015
  3.3.5         June 16th, 2015
  3.3.6         November 24th, 2015
  4.0.0-alpha   August 25th, 2015
  4.0.0-alpha2  December 30th, 2015

done!


#14

I got an error say

Error: Bootstrap tooltips require Tether

I tried to add the makalu:meteor-hubspot-tether, and got another error

W20160101-22:17:58.741(-6)? (STDERR) ReferenceError: document is not defined
W20160101-22:17:58.742(-6)? (STDERR)     at .meteor/packages/makalu_hubspot-tether/.0.0.1.1sb6gfz++os+web.browser+web.cordova/npm/node_modules/tether/dist/js/tether.js:406:12

anyone knows how to fix this?


#15

Thanks, @splendido!
Not that big a deal, but the reference 4.0.0-alpha2 doesn’t match meteor add twbs:bootstrap@=4.0.0-alpha.2, which is described in the v4-dev readme. Didn’t submit a PR 'cause I wasn’t sure which should be changed.


#16

@kako this is now fixed (see this comment on the related GH issue).

So now you can do:

meteor add twbs:bootstrap@4.0.0-alpha.2


#17

I’ve been using bootstrap since v2, but I’ve since switched to material-ui with flexbox and I gotta say so far I’m quite happy with my choice. Always worth checking out new options from time to time.


#18

The nice thing with bootstrap is that they maintain a strong legacy support, though bootstrap 4 is officially cutting off IE8. The unfortunate reality is that unless you are targeting app or app-like development, legacy support is still for you. Now, admittedly, Meteor is more suited to app-like development so this issue is less critical, but it’s still there!


#19

@peterm do you use a material-ui package? i need to use flexbox for a css only masonry system, (and i like to much flexbox) and try to install bootstrap 4 but i can’t work for me.

the material desing is very good, and i like to use that, what package recommend?


#20

Any Bootstrap 4 Beta packages around?