ember-bootstrap: Navbar component repeats itself 12 times

I am using ember-bootstrap's Navbar example code in a simple Ember test app:

  <div class="navbar-header">
    
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  
    
      
        Home
      
      
        Navbars
      
    
  

However I'm having strange results; the navbar is showing up 12 times in my page. For what it's worth, the toggle button doesn't do anything either - but that might be connected to the reason the navbar appears 12 times. See the following screenshot:

Here are the steps I took to set up this project:

1. ember new bootstrap-test
2. Inside /bootstrap-test:
   1. ember install ember-bootstrap
   2. ember g ember-bootstrap --bootstrap-version=4

Here is the contents of my ember-cli-build.js file:

/* eslint-env node */
'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-bootstrap': {
      'bootstrapVersion': 4,
      'importBootstrapFont': false,
      'importBootstrapCSS': false
    }
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.

  return app.toTree();
};

Finally, I'm using ember-cli version 2.14.2. Any help to figure this out would be greatly appreciated. Thank you!