Reputation: 2077
Although running bootstrap with rails is working fine, the JS functionality isn't working for me. For example, I can't collapse navbar, but I can run $()
in my browser console.
My /app/javascript/packs/application.js looks like this:
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require('bootstrap-sprockets')
require('popper.js')
require('turbolinks')
// As instructed in https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails
//= require bootstrap-sprockets
// But the above is not working
My /app/assets/stylesheets/application.scss looks like this:
@import "bootstrap" ;
body {
margin: 0 ;
}
In my routes.rb, I have root to: 'pages#home'
. The home.html.erb looks like this:
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<main role="main" class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary">Learn more</a>
</p>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</footer>
</div>
When I run the server, and visit the home page, an error is showing up on the browser's console:
Error: Cannot find module 'bootstrap-sprockets'
My gem file has these entries for jquery, bootstap:
gem 'jquery-rails', '~> 4.3', '>= 4.3.5'
gem "bootstrap", "~> 4.4"
gem 'bootstrap-sass'
I can't use features like navbar collapse in bootstrap. What's wrong?
Upvotes: 1
Views: 770
Reputation: 21
I had same problems with collapse not working, and latest version of jQuery and bootstrap. Had to change to: "bootstrap": "^4.4.1", "jquery": "3.4.1"
But this was with rails 6.0.1, so using ujs. Check those versions.
Upvotes: 2