Bootstrap Gem doesn't work

Question

I'm importing gem files like this, but the html files in view folder can't show the bootstrap navbar.

gem 'devise', '3.4.1'
gem "bootstrap-sass", "~> 3.1.1.0"
gem 'font-awesome-sass'
gem 'jquery-turbolinks'
gem 'delayed_job_active_record'
gem 'devise_zxcvbn'

This is my application's application.js file.

//= require jquery
//= require bootstrap/dropdown
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .

This is my application's application.scss file.

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

.alert-alert {
  @extend .alert-warning;
}

.alert-notice {
  @extend .alert-info;
}

There're no errors in this application but view files can't use the bootstrap themes. For example,<ul> tag :<ul class="nav navbar-nav pull-right"> there is no navbar on browser. I use Chrome. Please help me to use the bootstrap theme in Rails4.0.

Answer 1

From the bootstrap-sass

bootstrap-sprockets and bootstrap should not both be included in application.js.

bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example), while bootstrap provides a concatenated file containing all Bootstrap Javascripts.

So keep any one of them and remove the other from application.js

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .