The latest and greatest version of Bootstrap (version 4) sees a few changes from version 3.x. Adding it into Aurelia is a breeze if you follow these simple steps.
The CLI does ship with a
au install command, however we’ll need to modify our
aurelia.json file to make some additional changes for supporting Bootstrap that we’ll just install it the old fashioned way via Npm.
npm install firstname.lastname@example.org --save
Bootstrap also has a requirement of jQuery and Popper.js, we’ll install those as well:
npm install jquery popper.js --save
All Aurelia CLI applications have the concept of a project configuration file inside of
aurelia_project/aurelia.json which tells the bundler where our dependencies are and what they are. Without configuring our application, it won’t know what to load when we import it.
Inside of the
vendor-bundle section we need to add Popper as a script include in the
prepend section. Place this before anything else in the prepend section or you will probably get errors
The reason we need to prepend Popper.js is because it needs to be a global dependency for Bootstrap and needs to be included beforehand or it can’t see it (silly, I know).
Secondly, we then need to add the Bootstrap dependency itself into the
dependencies section beneath the
prepend section we were just working within.
Bootstrap is now ready to be used within our application. Open up
app.html and add the following CSS import to include Bootstrap’s CSS. Your
app.html in a default CLI install should look like my example, we’ve just added in a Bootstrap CSS import using
Lastly, open up
app.js and add the following import at the top: