Using Bootstrap v4 in a RequireJS Based Aurelia CLI Application


The latest and greatest version of Bootstrap (version 4) sees a few changes from version 3.x. Adding it to Aurelia is a breeze if you follow these simple steps.

Please note: these instructions are for installing Bootstrap 4 into an Aurelia CLI application that is using RequireJS. Other topics will cover Bootstrap using Webpack.

Install Bootstrap

The CLI does ship with an 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 bootstrap --save

Bootstrap also has a requirement of jQuery and Popper.js, but we only need to install jQuery as Popper.js ships with Bootstrap itself:

npm install jquery --save

Configure aurelia.json

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.

Secondly, we then need to add the Bootstrap dependency itself into the dependencies section beneath the prepend section we were just working within.

  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.bundle.min",
  "deps": [
 "exports": "$",
 "resources": [

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

  <require from="bootstrap/css/bootstrap.css"></require>

Lastly, open up app.js and add the following import at the top:

import 'bootstrap';


Using Aurelia in an ASP.NET core SPA, I added

“bootstrap”: “^4.0.0-beta”
“jquery”: "^3.2.1"
“popper.js”: “^1.12.6”

to package.json which installs the packages in node_modules. I also added the require and import as described, but then I am getting “Failed to load resource: the server responded with a status of 500 (Internal Server Error)” for vendor.css and app.js. Have you got an idea what I could be missing?


Are you using Webpack in your .NET core SPA?


Yes, I am using the default “dotnet new aurelia” template.


In my ASP.NET Core SPA template, my setup was a little different than the OP.

Same as OP.

npm install bootstrap@4.0.0-beta.2 jquery popper.js --save

Bootstrap Imports
What came with the template is correct. in boot.ts, you will find:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';

Add popper.js to the vendor array and more jquery to the top.

vendor: [
    // aurelia packages removed for brevity


Update the ProvidePlugin to include popper.

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']


After upgrading to Bootstrap 4.beta.3 i had problems including popper.js. But it turns out Bootstrap has included popper.js since beta.2, see this push request:

If this line in aurelia.json
"main": "js/bootstrap.min.js",
is changed to
"main": "js/bootstrap.bundle.min",
popper.js can be removed from the prepend section and Bootstrap will work.


Another thing I’ve found with Beta 3 is that you need to import bootstrap on top of your app-root TS/JS file, otherwise any Bootstrap component that needs its own javascript won’t work.

I scratched my head over this for a few hours after upgrading from Beta.1 to Beta.3 so hopefully this will help other folks in the same situation.


As @gotling wrote, it appears that you do not need to worry about popper in beta.3.
See also this excellent video on how to use Bootstrap 4 beta 3


There is a possibility that folks from AUCS group would create the Aurelia Bootstrap bridge as a supported product by Aurelia-UI-Toolkits group. The decision on the feasibility of this project will be done based on the results from the survey, presented by AUCS portal, next week


You can use aurelia toolbelt we cover all bootstrap components and even more but we need more time for completing it.
We will share our plan soon


@HamedFathi - OK I will try to find out more about toolbelt, as I might be proposing to do what you just did :smile: