Salah Sh Salah Sh - 1 month ago 20
Ruby Question

Bootstrap4 with Rails 5

I followed the official guide and this post to no help, can someone shed some light on this? (source on github)

My Gem file:

...
#bootstrap
gem 'bootstrap', '~> 4.0.0.alpha3.1'
gem 'sprockets-rails', :require => 'sprockets/railtie'

source 'https://rails-assets.org' do
gem 'rails-assets-tether', '>= 1.1.0'
end
...


my application.scss:

@import 'bootstrap-sprockets';
@import 'bootstrap';


my application.js:

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


my application.html.erb:

<!DOCTYPE html>
<html>
<head>
<title>DankDist</title>
<%= csrf_meta_tags %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

<body>
<%= yield %>
</body>
</html>


and Finally, my index.html.erb:

<h1>Scale#index</h1>
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<p>Hello Worldzz</p>
<p>Find me in app/views/scale/index.html.erb</p>
<%= params[:id] %> <br/>
<%= @id %>

Next Page <%= @page +1 %>

<hr/>
<%= params.inspect %>


I ran Bundle, and re-tried
rails s
with no changes, the header doesn't contain any styles.

Answer

There's a few mistakes

  1. ScaleController contains layout false - therefore your stylesheet import in your application.html.erb doesn't work
  2. @import 'bootstrap-sprockets'; is not necessary for the Bootstrap 4 gem
Comments