diff --git a/lib/workflow/questionnaire.js b/lib/workflow/questionnaire.js
index d113180e0..793505949 100644
--- a/lib/workflow/questionnaire.js
+++ b/lib/workflow/questionnaire.js
@@ -217,7 +217,7 @@ exports.askScaffold = {
   }, {
     value: 'scaffold-navigation',
     message: 'Navigation App',
-    hint: 'Add a router and some sample routes, Bootstrap v3 and Font Awesome v4.'
+    hint: 'Add a router and some sample routes, Bootstrap v4 and Font Awesome v5.'
   }]
 };
 
diff --git a/package-lock.json b/package-lock.json
index ea3b14d7a..e091c1613 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "aurelia-cli",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/skeleton/docker/Dockerfile b/skeleton/docker/Dockerfile
index 955134d0b..a7c46f19c 100644
--- a/skeleton/docker/Dockerfile
+++ b/skeleton/docker/Dockerfile
@@ -107,9 +107,6 @@ COPY --from=publish-stage /app/wwwroot/ .
 // @endif
 
 // @if feat["cli-bundler"] && !feat["dotnet-core"]
-  // @if feat["scaffold-navigation"]
-COPY --from=publish-stage /app/bootstrap/dist/ ./bootstrap/dist/
-  // @endif
 COPY --from=publish-stage /app/scripts/ ./scripts/
 COPY --from=publish-stage /app/index.html/ .
 // @endif
diff --git a/skeleton/protractor/protractor.conf.js b/skeleton/protractor/protractor.conf.js
index 3bcbdbedb..69d73b34a 100644
--- a/skeleton/protractor/protractor.conf.js
+++ b/skeleton/protractor/protractor.conf.js
@@ -56,7 +56,8 @@ const config  = {
         '--disable-renderer-backgrounding',
         '--disable-device-discovery-notifications',
         '--no-sandbox',
-        '--disable-dev-shm-usage'
+        '--disable-dev-shm-usage',
+        '--window-size=1024,768'
       ]
     }
   },
diff --git a/skeleton/scaffold-navigation/aurelia_project__if_cli-bundler/aurelia.json b/skeleton/scaffold-navigation/aurelia_project__if_cli-bundler/aurelia.json
index db0b977d3..980c36d90 100644
--- a/skeleton/scaffold-navigation/aurelia_project__if_cli-bundler/aurelia.json
+++ b/skeleton/scaffold-navigation/aurelia_project__if_cli-bundler/aurelia.json
@@ -5,25 +5,15 @@
         "name": "vendor-bundle.js",
         "prepend": [
           "node_modules/whatwg-fetch/dist/fetch.umd.js"
-        ],
-        "dependencies": [
-          {
-            "name": "bootstrap",
-            "deps": ["jquery"],
-            "path": "../node_modules/bootstrap",
-            "main": "dist/js/bootstrap.min"
-          }
         ]
       }
     ],
     "copyFiles": {
       // @if feat.web
-      "node_modules/bootstrap/dist/fonts/*": "bootstrap/dist/fonts",
-      "node_modules/font-awesome/fonts/*": "font-awesome/fonts",
+      "node_modules/@fortawesome/fontawesome-free/webfonts/*": "@fortawesome/fontawesome-free/webfonts",
       // @endif
       // @if feat['dotnet-core']
-      "node_modules/bootstrap/dist/fonts/*": "wwwroot/bootstrap/dist/fonts",
-      "node_modules/font-awesome/fonts/*": "wwwroot/font-awesome/fonts",
+      "node_modules/@fortawesome/fontawesome-free/webfonts/*": "wwwroot/@fortawesome/fontawesome-free/webfonts",
       // @endif
     }
   }
diff --git a/skeleton/scaffold-navigation/package.json b/skeleton/scaffold-navigation/package.json
index b8ed99b08..4f853a23d 100644
--- a/skeleton/scaffold-navigation/package.json
+++ b/skeleton/scaffold-navigation/package.json
@@ -2,8 +2,9 @@
   "dependencies": {
     "whatwg-fetch": "^3.0.0",
     "aurelia-fetch-client": "^1.0.0",
-    "bootstrap": "^3.3.6",
-    "font-awesome": "^4.6.3",
+    "bootstrap": "^4.4.1",
+    "popper.js": "^1.16.1",
+    "@fortawesome/fontawesome-free": "^5.12.1",
     "jquery": "^3.3.1"
   }
 }
\ No newline at end of file
diff --git a/skeleton/scaffold-navigation/src/app.html b/skeleton/scaffold-navigation/src/app.html
index 668be6212..20aae306f 100644
--- a/skeleton/scaffold-navigation/src/app.html
+++ b/skeleton/scaffold-navigation/src/app.html
@@ -1,6 +1,6 @@
 <template>
   <require from="bootstrap/dist/css/bootstrap.min.css"></require>
-  <require from="font-awesome/css/font-awesome.min.css"></require>
+  <require from="@fortawesome/fontawesome-free/css/all.min.css"></require>
   <!-- @if feat['cli-bundler'] || !(feat.less || feat.sass || feat.stylus) -->
   <require from="./styles.css"></require>
   <!-- @endif -->
diff --git a/skeleton/scaffold-navigation/src/child-router.html b/skeleton/scaffold-navigation/src/child-router.html
index 9cdd70c08..8548b23c5 100644
--- a/skeleton/scaffold-navigation/src/child-router.html
+++ b/skeleton/scaffold-navigation/src/child-router.html
@@ -1,16 +1,21 @@
 <template>
   <section class="au-animate">
     <h2>${heading}</h2>
-    <div>
-      <div class="col-md-2">
-        <ul class="well nav nav-pills nav-stacked">
-          <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
-            <a href.bind="row.href">${row.title}</a>
-          </li>
-        </ul>
-      </div>
-      <div class="col-md-10" style="padding: 0">
-        <router-view></router-view>
+    <div class="container-fluid card pt-3">
+      <div class="row">
+        <div class="col-md-2">
+          <div class="card">
+            <div class="list-group list-group-flush">
+              <a
+                repeat.for="row of router.navigation"
+                class="list-group-item list-group-item-action ${row.isActive ? 'active' : ''}"
+                href.bind="row.href">${row.title}</a>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-10">
+          <router-view></router-view>
+        </div>
       </div>
     </div>
   </section>
diff --git a/skeleton/scaffold-navigation/src/nav-bar.html b/skeleton/scaffold-navigation/src/nav-bar.html
index 8fe42933c..c6cb08bfc 100644
--- a/skeleton/scaffold-navigation/src/nav-bar.html
+++ b/skeleton/scaffold-navigation/src/nav-bar.html
@@ -1,30 +1,26 @@
 <template bindable="router">
-    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-      <div class="navbar-header">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-navbar-collapse-1">
-          <span class="sr-only">Toggle Navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="#">
-          <i class="fa fa-home"></i>
-          <span>${router.title}</span>
-        </a>
-      </div>
-  
-      <div class="collapse navbar-collapse" id="navigation-navbar-collapse-1">
-        <ul class="nav navbar-nav">
-          <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
-            <a data-toggle="collapse" data-target="#navigation-navbar-collapse-1.in" href.bind="row.href">${row.title}</a>
-          </li>
-        </ul>
-  
-        <ul class="nav navbar-nav navbar-right">
-          <li class="loader" if.bind="router.isNavigating">
-            <i class="fa fa-spinner fa-spin fa-2x"></i>
-          </li>
-        </ul>
-      </div>
-    </nav>
-  </template>
\ No newline at end of file
+  <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" role="navigation">
+    <a class="navbar-brand" href="#">
+      <i class="far fa-home"></i>
+      <span>${router.title}</span>
+    </a>
+
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-navbar-collapse-1" aria-controls="navigation-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navigation-navbar-collapse-1">
+      <ul class="navbar-nav mr-auto">
+        <li repeat.for="row of router.navigation" class="nav-item ${row.isActive ? 'active' : ''}">
+          <a class="nav-link" href.bind="row.href">${row.title}</a>
+        </li>
+      </ul>
+
+      <ul class="navbar-nav">
+        <li class="nav-item" if.bind="router.isNavigating & debounce">
+          <i class="far fa-circle-notch fa-spin text-white fa-2x"></i>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>
diff --git a/skeleton/scaffold-navigation/src/styles.css__if_not_less_and_not_sass_and_not_stylus b/skeleton/scaffold-navigation/src/styles.css__if_not_less_and_not_sass_and_not_stylus
index 71a96b166..41eb5c66b 100644
--- a/skeleton/scaffold-navigation/src/styles.css__if_not_less_and_not_sass_and_not_stylus
+++ b/skeleton/scaffold-navigation/src/styles.css__if_not_less_and_not_sass_and_not_stylus
@@ -2,32 +2,11 @@ body {
   margin: 0;
 }
 
-.splash {
-  text-align: center;
-  margin: 10% 0 0 0;
-  box-sizing: border-box;
-}
-
-.splash .message {
-  font-size: 72px;
-  line-height: 72px;
-  text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
-  text-transform: uppercase;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.splash .fa-spinner {
-  text-align: center;
-  display: inline-block;
-  font-size: 72px;
-  margin-top: 50px;
-}
-
 .page-host {
   position: absolute;
   left: 0;
   right: 0;
-  top: 50px;
+  top: 56px;
   bottom: 0;
   overflow-x: hidden;
   overflow-y: auto;
@@ -38,7 +17,7 @@ body {
     position: absolute;
     left: 10px;
     right: 0;
-    top: 50px;
+    top: 56px;
     bottom: 0;
     overflow-y: inherit;
     overflow-x: inherit;
@@ -46,7 +25,7 @@ body {
 }
 
 section {
-  margin: 0 20px;
+  margin: 1rem;
 }
 
 .navbar-nav li.loader {
@@ -69,16 +48,16 @@ div.au-stagger {
   animation-delay: 50ms;
 }
 
-.card-container.au-enter {
+.user-card-container.au-enter {
   opacity: 0;
 }
 
-.card-container.au-enter-active {
+.user-card-container.au-enter-active {
   -webkit-animation: fadeIn 2s;
   animation: fadeIn 2s;
 }
 
-.card {
+.user-card {
   overflow: hidden;
   position: relative;
   border: 1px solid #CCC;
@@ -91,17 +70,17 @@ div.au-stagger {
   box-shadow: 0 0 5px rgba(0, 0, 0, .5);
 }
 
-.card .content {
+.user-card .content {
   margin-top: 10px;
 }
 
-.card .content .name {
+.user-card .content .name {
   color: white;
   text-shadow: 0 0 6px rgba(0, 0, 0, .5);
   font-size: 18px;
 }
 
-.card .header-bg {
+.user-card .header-bg {
   /* This stretches the canvas across the entire hero unit */
   position: absolute;
   top: 0;
@@ -112,13 +91,13 @@ div.au-stagger {
   border-radius: 6px 6px 0 0;
 }
 
-.card .avatar {
+.user-card .avatar {
   position: relative;
   margin-top: 15px;
   z-index: 100;
 }
 
-.card .avatar img {
+.user-card .avatar img {
   width: 100px;
   height: 100px;
   -webkit-border-radius: 50%;
diff --git a/skeleton/scaffold-navigation/src/styles.less__if_less b/skeleton/scaffold-navigation/src/styles.less__if_less
index 71a96b166..41eb5c66b 100644
--- a/skeleton/scaffold-navigation/src/styles.less__if_less
+++ b/skeleton/scaffold-navigation/src/styles.less__if_less
@@ -2,32 +2,11 @@ body {
   margin: 0;
 }
 
-.splash {
-  text-align: center;
-  margin: 10% 0 0 0;
-  box-sizing: border-box;
-}
-
-.splash .message {
-  font-size: 72px;
-  line-height: 72px;
-  text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
-  text-transform: uppercase;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.splash .fa-spinner {
-  text-align: center;
-  display: inline-block;
-  font-size: 72px;
-  margin-top: 50px;
-}
-
 .page-host {
   position: absolute;
   left: 0;
   right: 0;
-  top: 50px;
+  top: 56px;
   bottom: 0;
   overflow-x: hidden;
   overflow-y: auto;
@@ -38,7 +17,7 @@ body {
     position: absolute;
     left: 10px;
     right: 0;
-    top: 50px;
+    top: 56px;
     bottom: 0;
     overflow-y: inherit;
     overflow-x: inherit;
@@ -46,7 +25,7 @@ body {
 }
 
 section {
-  margin: 0 20px;
+  margin: 1rem;
 }
 
 .navbar-nav li.loader {
@@ -69,16 +48,16 @@ div.au-stagger {
   animation-delay: 50ms;
 }
 
-.card-container.au-enter {
+.user-card-container.au-enter {
   opacity: 0;
 }
 
-.card-container.au-enter-active {
+.user-card-container.au-enter-active {
   -webkit-animation: fadeIn 2s;
   animation: fadeIn 2s;
 }
 
-.card {
+.user-card {
   overflow: hidden;
   position: relative;
   border: 1px solid #CCC;
@@ -91,17 +70,17 @@ div.au-stagger {
   box-shadow: 0 0 5px rgba(0, 0, 0, .5);
 }
 
-.card .content {
+.user-card .content {
   margin-top: 10px;
 }
 
-.card .content .name {
+.user-card .content .name {
   color: white;
   text-shadow: 0 0 6px rgba(0, 0, 0, .5);
   font-size: 18px;
 }
 
-.card .header-bg {
+.user-card .header-bg {
   /* This stretches the canvas across the entire hero unit */
   position: absolute;
   top: 0;
@@ -112,13 +91,13 @@ div.au-stagger {
   border-radius: 6px 6px 0 0;
 }
 
-.card .avatar {
+.user-card .avatar {
   position: relative;
   margin-top: 15px;
   z-index: 100;
 }
 
-.card .avatar img {
+.user-card .avatar img {
   width: 100px;
   height: 100px;
   -webkit-border-radius: 50%;
diff --git a/skeleton/scaffold-navigation/src/styles.scss__if_sass b/skeleton/scaffold-navigation/src/styles.scss__if_sass
index 71a96b166..41eb5c66b 100644
--- a/skeleton/scaffold-navigation/src/styles.scss__if_sass
+++ b/skeleton/scaffold-navigation/src/styles.scss__if_sass
@@ -2,32 +2,11 @@ body {
   margin: 0;
 }
 
-.splash {
-  text-align: center;
-  margin: 10% 0 0 0;
-  box-sizing: border-box;
-}
-
-.splash .message {
-  font-size: 72px;
-  line-height: 72px;
-  text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
-  text-transform: uppercase;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.splash .fa-spinner {
-  text-align: center;
-  display: inline-block;
-  font-size: 72px;
-  margin-top: 50px;
-}
-
 .page-host {
   position: absolute;
   left: 0;
   right: 0;
-  top: 50px;
+  top: 56px;
   bottom: 0;
   overflow-x: hidden;
   overflow-y: auto;
@@ -38,7 +17,7 @@ body {
     position: absolute;
     left: 10px;
     right: 0;
-    top: 50px;
+    top: 56px;
     bottom: 0;
     overflow-y: inherit;
     overflow-x: inherit;
@@ -46,7 +25,7 @@ body {
 }
 
 section {
-  margin: 0 20px;
+  margin: 1rem;
 }
 
 .navbar-nav li.loader {
@@ -69,16 +48,16 @@ div.au-stagger {
   animation-delay: 50ms;
 }
 
-.card-container.au-enter {
+.user-card-container.au-enter {
   opacity: 0;
 }
 
-.card-container.au-enter-active {
+.user-card-container.au-enter-active {
   -webkit-animation: fadeIn 2s;
   animation: fadeIn 2s;
 }
 
-.card {
+.user-card {
   overflow: hidden;
   position: relative;
   border: 1px solid #CCC;
@@ -91,17 +70,17 @@ div.au-stagger {
   box-shadow: 0 0 5px rgba(0, 0, 0, .5);
 }
 
-.card .content {
+.user-card .content {
   margin-top: 10px;
 }
 
-.card .content .name {
+.user-card .content .name {
   color: white;
   text-shadow: 0 0 6px rgba(0, 0, 0, .5);
   font-size: 18px;
 }
 
-.card .header-bg {
+.user-card .header-bg {
   /* This stretches the canvas across the entire hero unit */
   position: absolute;
   top: 0;
@@ -112,13 +91,13 @@ div.au-stagger {
   border-radius: 6px 6px 0 0;
 }
 
-.card .avatar {
+.user-card .avatar {
   position: relative;
   margin-top: 15px;
   z-index: 100;
 }
 
-.card .avatar img {
+.user-card .avatar img {
   width: 100px;
   height: 100px;
   -webkit-border-radius: 50%;
diff --git a/skeleton/scaffold-navigation/src/styles.styl__if_stylus b/skeleton/scaffold-navigation/src/styles.styl__if_stylus
index 687744668..66dc228fb 100644
--- a/skeleton/scaffold-navigation/src/styles.styl__if_stylus
+++ b/skeleton/scaffold-navigation/src/styles.styl__if_stylus
@@ -1,29 +1,11 @@
 body
   margin: 0
 
-.splash
-  text-align: center
-  margin: 10% 0 0 0
-  box-sizing: border-box
-
-.splash .message
-  font-size: 72px
-  line-height: 72px
-  text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px
-  text-transform: uppercase
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
-
-.splash .fa-spinner
-  text-align: center
-  display: inline-block
-  font-size: 72px
-  margin-top: 50px
-
 .page-host
   position: absolute
   left: 0
   right: 0
-  top: 50px
+  top: 56px
   bottom: 0
   overflow-x: hidden
   overflow-y: auto
@@ -33,14 +15,13 @@ body
     position: absolute
     left: 10px
     right: 0
-    top: 50px
+    top: 56px
     bottom: 0
     overflow-y: inherit
     overflow-x: inherit
 
 section
-  margin: 0 20px
-
+  margin: 1rem
 
 .navbar-nav li.loader
   margin: 12px 24px 0 6px
@@ -58,14 +39,14 @@ div.au-stagger
   -webkit-animation-delay: 50ms
   animation-delay: 50ms
 
-.card-container.au-enter
+.user-card-container.au-enter
   opacity: 0
 
-.card-container.au-enter-active
+.user-card-container.au-enter-active
   -webkit-animation: fadeIn 2s
   animation: fadeIn 2s
 
-.card
+.user-card
   overflow: hidden
   position: relative
   border: 1px solid #CCC
@@ -77,15 +58,15 @@ div.au-stagger
   margin-bottom: 32px
   box-shadow: 0 0 5px rgba(0, 0, 0, .5)
 
-.card .content
+.user-card .content
   margin-top: 10px
 
-.card .content .name
+.user-card .content .name
   color: white
   text-shadow: 0 0 6px rgba(0, 0, 0, .5)
   font-size: 18px
 
-.card .header-bg
+.user-card .header-bg
   /* This stretches the canvas across the entire hero unit */
   position: absolute
   top: 0
@@ -95,12 +76,12 @@ div.au-stagger
   border-bottom: 1px #FFF solid
   border-radius: 6px 6px 0 0
 
-.card .avatar
+.user-card .avatar
   position: relative
   margin-top: 15px
   z-index: 100
 
-.card .avatar img
+.user-card .avatar img
   width: 100px
   height: 100px
   -webkit-border-radius: 50%
diff --git a/skeleton/scaffold-navigation/src/users.html b/skeleton/scaffold-navigation/src/users.html
index 690cc9568..40e987a60 100644
--- a/skeleton/scaffold-navigation/src/users.html
+++ b/skeleton/scaffold-navigation/src/users.html
@@ -4,8 +4,8 @@
   <section class="au-animate">
       <h2>${heading}</h2>
       <div class="row au-stagger">
-        <div class="col-sm-6 col-md-3 card-container au-animate" repeat.for="user of users">
-            <div class="card">
+        <div class="col-sm-6 col-md-3 user-card-container au-animate" repeat.for="user of users">
+            <div class="user-card">
                 <canvas class="header-bg" width="250" height="70" blur-image.bind="image"></canvas>
                 <div class="avatar">
                     <img src.bind="user.avatar_url" crossorigin ref="image"/>
diff --git a/skeleton/scaffold-navigation/src/welcome.html b/skeleton/scaffold-navigation/src/welcome.html
index 317225c4c..92205f277 100644
--- a/skeleton/scaffold-navigation/src/welcome.html
+++ b/skeleton/scaffold-navigation/src/welcome.html
@@ -14,7 +14,7 @@ <h2>${heading}</h2>
         <label>Full Name</label>
         <p class="help-block">${fullName | upper}</p>
       </div>
-      <button type="submit" class="btn btn-default">Submit</button>
+      <button type="submit" class="btn btn-primary">Submit</button>
     </form>
   </section>
 </template>
diff --git a/skeleton/scaffold-navigation/test__if_protractor/e2e/demo.e2e.ext b/skeleton/scaffold-navigation/test__if_protractor/e2e/demo.e2e.ext
index 7317edf93..f57795043 100644
--- a/skeleton/scaffold-navigation/test__if_protractor/e2e/demo.e2e.ext
+++ b/skeleton/scaffold-navigation/test__if_protractor/e2e/demo.e2e.ext
@@ -43,7 +43,6 @@ describe('aurelia skeleton app', function() {
 
   it('should navigate to users page', async () => {
     await poSkeleton.navigateTo('#/users');
-    browser.sleep(200);
     await expect(await poSkeleton.getCurrentPageTitle()).toBe('Github Users | Aurelia');
   });
 });
diff --git a/skeleton/scaffold-navigation/test__if_protractor/e2e/skeleton.po.ext b/skeleton/scaffold-navigation/test__if_protractor/e2e/skeleton.po.ext
index 43e3dfb09..805def298 100644
--- a/skeleton/scaffold-navigation/test__if_protractor/e2e/skeleton.po.ext
+++ b/skeleton/scaffold-navigation/test__if_protractor/e2e/skeleton.po.ext
@@ -11,5 +11,6 @@ export class PageObjectSkeleton {
     const navigatingReady = browser.waitForRouterComplete();
     await element(by.css('a[href="' + href + '"]')).click();
     await navigatingReady;
+    await browser.sleep(200);
   }
 }