CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrap-3
Rudi Thiel
Rudi Thiel

Reputation: 2551

Buggy bootstrap 3 navbar dropdowns and collapse

I'm using a bootstrap 3 navbar for a site I'm creating for fun. It looks great but I often run into a bug where the dropdowns won't expand or the collapse button won't work. I'm building it in Rails and added the cdn link to bootstrap.min.js at the bottom of my application.html.erb file.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Am I putting it in the wrong place? Thanks

Upvotes: 1

Views: 57

Answers (1)

Dan Kreiger
Dan Kreiger

Reputation: 5516

Have you checked your console? Bootstrap requires JQuery, so it might not be working if you haven't included JQuery as well.

However, in a Rails app people usually use the gem bootstrap-sass to incorporate Bootstrap-3. This gem allows you to include bootstrap in the asset pipeline. It's easier to prioritize the order of your assets when they are all kept within the asset pipeline.

I would strongly recommend using the bootstrap-sass docs to include Bootstrap in your asset pipeline rather than including bootstrap via CDN in your html. The documentation has a step-by-step guide that tells you exactly how to include it, and it's also updated for Rails 5.

One of the benefits of Rails is that it allows you to keep your code very organized, so it's good to include Bootstrap in that organization.

Helpful Resources:

Update

With the bootstrap-sass gem your application.js file should look like this (plus any additional javascripts you might have added):

// app/assets/javascripts/application.js

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

Most importantly, it needs these two lines in this order to work:

//= require jquery
//= require bootstrap-sprockets

Upvotes: 1

Related Questions