agusgambina agusgambina - 7 months ago 39
Ruby Question

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

Answer

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.

Comments