japortegijs's avatar

Bootstrap 4 Beta! Woop!

I implemented Bootstrap 4 Beta, but it requires Popper.js. I was wondering if I implemented the JavaScript correctly:

try {
    window.$ = window.jQuery = require('jquery');
    Popper = require('popper.js');

    require('bootstrap');
} catch (e) {}

The building process works fine, but is this the correct way to do it?

Thanks in advance!

0 likes
5 replies
danmatthews's avatar
Level 5

Yep that should do it, for verbosity's sake i would match how Taylor has done jQuery above it and do:

window.Popper = require('popper.js');

But it's not absolutely necessary.

1 like
36864's avatar

Just leaving a note here, if you're using sass to compile bootstrap components, there's a new component called functions which you'll probably need to add to your list. A few of the other components will require it. So, if your app.scss looked anything like this:

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/pagination";

just add @import "~bootstrap/scss/functions"; to the top of the bootstrap pile.

EDIT: My dropdowns are no longer working. I tried importing popper as @danmatthews suggested, but no luck. As far as I can tell from the documentation, nothing changed about dropdown markups, so I'm not sure what's going wrong.

Anyone else having problems with dropdowns?

36864's avatar

Sorry, I forgot to edit my post after figuring it out. Should be an easy fix:

window.Popper = require('popper.js').default;

Please or to participate in this conversation.