CODEWITHSUNDEEP
ruby-on-railsrubytwitter-bootstrap
agusgambina
agusgambina

Reputation: 6679

Ruby on rails bootstrap css js working but not found

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

enter image description here

Upvotes: 0

Views: 313

Answers (2)

Anthony E
Anthony E

Reputation: 11235

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.

Upvotes: 2

Apoorv
Apoorv

Reputation: 1389

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.

Upvotes: 2

Related Questions