Salah Sh Salah Sh - 1 year ago 115
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:

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

source '' do
gem 'rails-assets-tether', '>= 1.1.0'

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>
<%= csrf_meta_tags %>

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

<%= yield %>

and Finally, my index.html.erb:

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

Next Page <%= @page +1 %>

<%= params.inspect %>

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

Answer Source

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
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download