Ruby on rails bootstrap css js working but not found

Question

I have a rails application which I added the bootstrap gem

first I added this two gems

gem 'bootstrap'
gem 'sprockets-rails', :require => 'sprockets/railtie'

which installed this packages

Using bootstrap 4.0.0.alpha3
Using sprockets 3.6.0

After I modified application.scss to

// Custom bootstrap variables must be set or import before bootstrap itself.
@import "bootstrap";

Then I left application.js like this

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require tether
//= require bootstrap-sprockets
//= require_tree .
//= require_self

Lastly my application.html.erb is this

<!DOCTYPE html>
<html>
<head>
  <title>Squirm</title>
  <%= stylesheet_link_tag    "bootstrap"  %>
 <%= javascript_include_tag "bootstrap" %>
 <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
 <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
 <%= csrf_meta_tags %>
</head>
<body>
  <%= render 'partials/navbar' %>

  <div class="container">
    <%= yield %>
  </div>

</body>
</html>

Bootstrap seems to we working, but in the Google Chrome console seems not to be found

Anthony E · Accepted Answer · 2016-04-30 14:33:34Z

2

You're loading Bootstrap before you've loaded jQuery. Many of Bootstrap's components require javascript (carousel, tabs, etc.), however, most of Bootstrap will work without, which is why the Bootstrap CSS is showing on your page.

Loading Bootstrap after jQuery will fix the issue:

<!DOCTYPE html>
<html>
<head>
  <title>Squirm</title>

 <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
 <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
 <%= stylesheet_link_tag    "bootstrap"  %>
 <%= javascript_include_tag "bootstrap" %>
 <%= csrf_meta_tags %>
</head>
<body>
  <%= render 'partials/navbar' %>

  <div class="container">
    <%= yield %>
  </div>

</body>
</html>

Also, not 100% sure based on your code, but you may be loading bootstrap twice. It seems this line: //= require bootstrap-sprockets is already loading Bootstrap.

edited Apr 30, 2016 at 14:33

answered Apr 30, 2016 at 13:29

Anthony E

11.3k2 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

agusgambina Over a year ago

thank you @AnthonyE I had two mistakes, first the order of my import, second that I was adding bootstrap twice to the project.

Apoorv · Accepted Answer · 2016-04-30 13:29:20Z

2

you need to add jquery as well normally jquery come bundled in rails app, but maybe due to some reasons its not thr in your app

add jquery from

https://cdnjs.com/libraries/jquery/

and let us knwo if this change works.

answered Apr 30, 2016 at 13:29

Apoorv

1,3951 gold badge17 silver badges20 bronze badges

2 Comments

Anthony E Over a year ago

It looks like jQuery is already being loaded in application.js

agusgambina Over a year ago

thank you @user5501253 you were right that jquery was in the wrong order and that was why bootstrap would not see it.

Collectives™ on Stack Overflow

Ruby on rails bootstrap css js working but not found

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related