Bootstrap4 with Rails 5

Question

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.

You still need your require_tree . in your application.css.scss. Rename scss to css.scss then add /*= require.... */ I forgot the string within. Refer to http://stackoverflow.com/a/21643987/3338439 — Mingsheng, Sep 06 '16 at 10:55
Oh yeah. Hmm then I'm not sure. Haven't checked out bootstrap 4. If nobody answers I'll go try it out tomorrow and let u know! — Mingsheng, Sep 06 '16 at 16:23

score 2 · Accepted Answer · answered Sep 07 '16 at 12:40

2

There's a few mistakes

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

answered Sep 07 '16 at 12:40

Mingsheng

1,031
10
16

score -2 · Answer 2 · edited Nov 02 '16 at 07:35

-2

in application.js, try to line these two lines as follows, i noticed it worked for me:

//= require jquery
//= require bootstrap-sprockets

edited Nov 02 '16 at 07:35

DanielBarbarian

5,093
12
35
44

answered Nov 02 '16 at 07:08

odins

111
1
5

Bootstrap4 with Rails 5

2 Answers2