Locally Installed Bootstrap does not work but bootstrap from the CDN site does work

Question

I am following a tutorial titled "Let's Scaffold a Web App" with Yeoman that features Grunt, Bower, AngularJS, and Bootstrap. I got to the initial scaffold and noticed that the navbar was not being styled by Bootstrap. In other words, Bootstrap is supposed to take an ordered list and display it as a navigation bar with nice-looking tabs. The result should look like this: scaffoldImage However, my navigation bar displays ordinary HTML like:

Toggle navigation mytodo ∙Home ∙About ∙Contact

I checked the index.html file to see if the bootstrap distribution files are being referenced and I saw the following script tags at the bottom.

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>

They were located before the closing "body" and "html" tags. So I presume that the browser has access to the bootstrap.js files. The directory structure is pretty much the same as described in the tutorial here and all the files seem to be in the right place. I guess my problem is that I don't know how or when the bootstrap.js file is loaded or which config file needs to be modified so bootstrap can do its thing.

If I include the following link and src files inside the "head" element:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

it works.

My question is, "Why aren't the locally installed bootstrap libraries being used to style the page?" I want bower to manage my dependencies and I presume this is the reason why bootstrap, jquery, angular, and other libraries are installed locally.

It if helps here are the contents of the following files: todo/bowercc -

{
  "directory": "bower_components"
}

todo/bower.json -

{
  "name": "mytodo",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "bootstrap": "^3.2.0",
    "angular-animate": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-touch": "^1.3.0"
  },
  "devDependencies": {
    "angular-mocks": "^1.3.0"
  },
  "appPath": "app",
  "moduleName": "mytodoApp"
}

todo/bower_components/bootstrap/.bower.json -

{
  "name": "bootstrap",
  "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
  "keywords": [
    "css",
    "js",
    "less",
    "mobile-first",
    "responsive",
    "front-end",
    "framework",
    "web"
  ],
  "homepage": "http://getbootstrap.com",
  "license": "MIT",
  "moduleType": "globals",
  "main": [
    "less/bootstrap.less",
    "dist/js/bootstrap.js"
  ],
  "ignore": [
    "/.*",
    "_config.yml",
    "CNAME",
    "composer.json",
    "CONTRIBUTING.md",
    "docs",
    "js/tests",
    "test-infra"
  ],
  "dependencies": {
    "jquery": ">= 1.9.1"
  },
  "version": "3.3.5",
  "_release": "3.3.5",
  "_resolution": {
    "type": "version",
    "tag": "v3.3.5",
    "commit": "16b48259a62f576e52c903c476bd42b90ab22482"
  },
  "_source": "git://github.com/twbs/bootstrap.git",
  "_target": "^3.2.0",
  "_originalSource": "bootstrap"
}

todo/bower_components/bootstrap/bower.json -

{
  "name": "bootstrap",
  "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
  "keywords": [
    "css",
    "js",
    "less",
    "mobile-first",
    "responsive",
    "front-end",
    "framework",
    "web"
  ],
  "homepage": "http://getbootstrap.com",
  "license": "MIT",
  "moduleType": "globals",
  "main": [
    "less/bootstrap.less",
    "dist/js/bootstrap.js"
  ],
  "ignore": [
    "/.*",
    "_config.yml",
    "CNAME",
    "composer.json",
    "CONTRIBUTING.md",
    "docs",
    "js/tests",
    "test-infra"
  ],
  "dependencies": {
    "jquery": ">= 1.9.1"
  }
}

Any help will be greatly appreciated.

Michael P. Bazos Michael P. Bazos · Accepted Answer · 2015-10-14T23:36:18

You are confusing bootstrap.js with bootstrap.css.

According to the description of the question, link to local bootstrap.css is missing.

Try adding the following:

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

Locally Installed Bootstrap does not work but bootstrap from the CDN site does work

1 Answers