Adding Bootstrap 4 to an Aurelia CLI Project

app.html

<template>
    <require from="bootstrap/css/bootstrap.css"></require>
    <require from="styles.css"></require>
  
     <div class="container">
        <div class="header clearfix">
        <h3 class="text-muted"><span class="brand-highlight">my </span> books</h3>
      </div>
      <router-view></router-view>
      <footer class="footer">
        <p>&copy; Aurelia Demo 2017</p>
      </footer>

    </div> <!-- /container -->

</template>

app.js

import 'bootstrap';

export class App {
  configureRouter(config, router) {
  this.router = router;
  config.title = 'My-Books';
  config.map([ 
   { route: ['', 'home'], name: 'home', moduleId: 'index' },
   { route: 'books', name: 'books', moduleId: './resources/elements/books'},
  ]);
  }
}

aurelia.json

{
  "name": "my-books",
  "type": "project:application",
  "platform": {
    "id": "web",
    "displayName": "Web",
    "output": "scripts",
    "index": "index.html"
  },
  "transpiler": {
    "id": "babel",
    "displayName": "Babel",
    "fileExtension": ".js",
    "options": {
      "plugins": [
        "transform-es2015-modules-amd"
      ]
    },
    "source": "src/**/*.js"
  },
  "markupProcessor": {
    "id": "minimum",
    "displayName": "Minimal Minification",
    "fileExtension": ".html",
    "source": "src/**/*.html"
  },
  "cssProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".css",
    "source": "src/**/*.css"
  },
  "editor": {
    "id": "vscode",
    "displayName": "Visual Studio Code"
  },
  "unitTestRunner": {
    "id": "karma",
    "displayName": "Karma",
    "source": "test/unit/**/*.js"
  },
  "paths": {
    "root": "src",
    "resources": "src/resources",
    "elements": "src/resources/elements",
    "attributes": "src/resources/attributes",
    "valueConverters": "src/resources/value-converters",
    "bindingBehaviors": "src/resources/binding-behaviors",
    "fontsInput": "./node_modules/font-awesome/fonts/**/*.*",
    "fontsOutput": "./fonts"
  },
  "testFramework": {
    "id": "jasmine",
    "displayName": "Jasmine"
  },
  "build": {
    "targets": [
      {
        "id": "web",
        "displayName": "Web",
        "output": "scripts",
        "index": "index.html"
      }
    ],
    "loader": {
      "type": "require",
      "configTarget": "vendor-bundle.js",
      "includeBundleMetadataInConfig": "auto",
      "plugins": [
        {
          "name": "text",
          "extensions": [
            ".html",
            ".css"
          ],
          "stub": true
        }
      ]
    },
    "options": {
      "minify": "stage & prod",
      "sourcemaps": "dev & stage"
    },
    "bundles": [
      {
        "name": "app-bundle.js",
        "source": [
          "[**/*.js]",
          "**/*.{css,html}"
        ]
      },
      {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/bluebird/js/browser/bluebird.core.js",
          "node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird.js",
          "node_modules/requirejs/require.js"
        ],
        "dependencies": [
          "aurelia-binding",
          "aurelia-bootstrapper",
          "aurelia-dependency-injection",
          "aurelia-event-aggregator",
          "aurelia-framework",
          "aurelia-history",
          "aurelia-history-browser",
          "aurelia-loader",
          "aurelia-loader-default",
          "aurelia-logging",
          "aurelia-logging-console",
          "aurelia-metadata",
          "aurelia-pal",
          "aurelia-pal-browser",
          "aurelia-path",
          "aurelia-polyfills",
          "aurelia-route-recognizer",
          "aurelia-router",
          "aurelia-task-queue",
          "aurelia-templating",
          "aurelia-templating-binding",
          "text",
          "jquery",
           {
              "name": "bootstrap",
              "path": "../node_modules/bootstrap/dist",
              "main": "js/bootstrap.bundle.min.js",
              "deps": [
                "jquery"
              ],
             "exports": "$",
             "resources": [
               "css/bootstrap.css"
              ]
          },
          {
            "name": "font-awesome",
            "path": "../node_modules/font-awesome/css",
            "main": "font-awesome.css"
          },
          {
            "name": "aurelia-templating-resources",
            "path": "../node_modules/aurelia-templating-resources/dist/amd",
            "main": "aurelia-templating-resources"
          },
          {
            "name": "aurelia-templating-router",
            "path": "../node_modules/aurelia-templating-router/dist/amd",
            "main": "aurelia-templating-router"
          },
          {
            "name": "aurelia-testing",
            "path": "../node_modules/aurelia-testing/dist/amd",
            "main": "aurelia-testing",
            "env": "dev"
          },
          {
            "name": "aurelia-fetch-client",
            "main": "aurelia-fetch-client",
            "path": "../node_modules/aurelia-fetch-client/dist/amd",
            "resources": []
          }
        ]
      }
    ]
  }
}

package.json

{
  "name": "my-books",
  "description": "An Aurelia client application.",
  "version": "0.1.0",
  "repository": {
    "type": "???",
    "url": "???"
  },
  "license": "MIT",
  "dependencies": {
    "aurelia-animator-css": "^1.0.1",
    "aurelia-bootstrapper": "^2.1.0",
    "aurelia-fetch-client": "^1.1.2",
    "bluebird": "^3.4.1",
    "bootstrap": "^4.0.0",
    "font-awesome": "^4.7.0",
    "requirejs": "^2.3.2",
    "jquery": "^3.2.1",
    "text": "github:requirejs/text#latest"
  },
  "peerDependencies": {},
  "devDependencies": {
    "aurelia-cli": "^0.26.1",
    "aurelia-testing": "^1.0.0-beta.2.0.1",
    "aurelia-tools": "^1.0.0",
    "browser-sync": "^2.13.0",
    "connect-history-api-fallback": "^1.2.0",
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-changed-in-place": "^2.0.3",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^2.0.0-alpha",
    "gulp-notify": "^2.2.0",
    "minimatch": "^3.0.2",
    "through2": "^2.0.1",
    "uglify-js": "^2.6.3",
    "vinyl-fs": "^2.4.3",
    "babel-eslint": "^6.0.4",
    "babel-plugin-syntax-flow": "^6.8.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-amd": "^6.8.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
    "babel-plugin-transform-flow-strip-types": "^6.8.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-stage-1": "^6.5.0",
    "babel-polyfill": "^6.9.1",
    "babel-register": "^6.9.0",
    "gulp-babel": "^6.1.2",
    "gulp-eslint": "^2.0.0",
    "gulp-htmlmin": "^3.0.0",
    "html-minifier": "^3.2.3",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-babel-preprocessor": "^6.0.1"
  }
}