1

I am trying to move a Rails 5 app from using the bootstrap-sass gem onto bootstrap4 through the bootstrap-rubygem gem. Despite following the instructions here and the suggestions in this post here I cannot get bootstrap styles to apply, views load and run without error, just no bootstrap styling at all.

Other than the obvious, things I have done are;

  1. gem uninstall gem bootstrap-sass
  2. rake assets:precompile

Here's my code, can anyone see what I'm getting wrong?

Example of a view that renders fine without error, just with zero bootstrap styling taking effect;

_navbar.html.erb:

<ul class="nav navbar-nav navbar-right">
    <% if user_signed_in? %>                
      <li><%= link_to_unless_current('My Quotes', quotes_path(current_user)) do %></li>
                  <% end %>
      <li><%= link_to_unless_current_or_root('New Quote', new_quote_path) %></li>
      <li><%= link_to('My Account', edit_user_registration_path) %></li>
      <li><%= link_to "Sign out", destroy_user_session_path, :method => :delete %></li>
    <% else %>
      <li><%= link_to('Sign in', new_user_session_path) %></li>
      <li><%= link_to('Sign up', new_user_registration_path) %></li>
    <% end %>
</ul>

application.scss;

@import 'bootstrap';

application.js;

//= require jquery3
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-sprockets
//= require popper
//= require turbolinks
//= require_tree .
//= require_self

gemfile;

source 'https://rubygems.org'

gem 'pry-rails'
gem 'watir'
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'
gem 'simple_form'
gem 'devise'
gem 'cancancan', '~> 1.10'
gem 'gon'
gem 'rubyzip', '>= 1.2.1'
gem 'axlsx', git: 'https://github.com/randym/axlsx.git', ref: '776037c0fc799bb09da8c9ea47980bd3bf296874'
gem 'axlsx_rails'
gem 'validates_email_format_of'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
# Use postgresql as the database for Active Record
gem 'pg', '~> 0.18'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platform: :mri
  gem 'rspec-rails', :group => [:test, :development]
  gem 'spring-commands-rspec'
  gem 'rails-controller-testing'
  gem 'factory_girl_rails'
    group :test do
        gem 'capybara'
      gem 'database_cleaner'
      gem 'shoulda-matchers', require: false
    end
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console'
  gem 'listen', '~> 3.0.5'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

bundle returns this;

Using rake 12.0.0
Using concurrent-ruby 1.0.5
Using i18n 0.8.1
Using minitest 5.10.2
Using thread_safe 0.3.6
Using builder 3.2.3
Using erubis 2.7.0
Using mini_portile2 2.1.0
Using rack 2.0.3
Using nio4r 2.0.0
Using websocket-extensions 0.1.2
Using mime-types-data 3.2016.0521
Using arel 7.1.4
Using public_suffix 2.0.5
Using execjs 2.7.0
Using htmlentities 4.3.4
Using mimemagic 0.3.2
Using rubyzip 1.2.1
Using bcrypt 3.1.11
Using bindex 0.5.0
Using popper_js 1.9.9
Using sass 3.4.24
Using byebug 9.0.6
Using cancancan 1.17.0
Using ffi 1.9.18
Using coderay 1.1.1
Using coffee-script-source 1.12.2
Using method_source 0.8.2
Using thor 0.19.4
Using database_cleaner 1.6.1
Using orm_adapter 0.5.0
Using diff-lcs 1.3
Using json 2.1.0
Using multi_json 1.12.1
Using request_store 1.3.2
Using rb-fsevent 0.9.8
Using pg 0.20.0
Using slop 3.6.0
Using puma 3.8.2
Using bundler 1.13.6
Using rspec-support 3.6.0
Using tilt 2.0.7
Using websocket 1.2.4
Using turbolinks-source 5.0.3
Using validates_email_format_of 1.6.3
Using tzinfo 1.2.3
Using nokogiri 1.7.2
Using rack-test 0.6.3
Using warden 1.2.7
Using sprockets 3.7.1
Using websocket-driver 0.6.5
Using mime-types 3.1
Using addressable 2.5.1
Using autoprefixer-rails 7.1.1.2
Using uglifier 3.2.0
Using childprocess 0.7.0
Using rb-inotify 0.9.8
Using coffee-script 2.4.1
Using pry 0.10.4
Using rspec-core 3.6.0
Using rspec-expectations 3.6.0
Using rspec-mocks 3.6.0
Using turbolinks 5.0.1
Using activesupport 5.0.3
Using loofah 2.0.3
Using axlsx 2.1.0.pre from https://github.com/randym/axlsx.git (at 776037c@776037c)
Using xpath 2.1.0
Using mail 2.6.5
Using bootstrap 4.0.0.alpha6 from https://github.com/twbs/bootstrap-rubygem (at master@7cdeca9)
Using selenium-webdriver 3.4.0
Using listen 3.0.8
Using pry-rails 0.3.6
Using rails-dom-testing 2.0.3
Using globalid 0.4.0
Using activemodel 5.0.3
Using factory_girl 4.8.0
Using jbuilder 2.6.4
Using shoulda-matchers 3.1.1
Using spring 2.0.2
Using rails-html-sanitizer 1.0.3
Using capybara 2.14.0
Using watir 6.2.1
Using activejob 5.0.3
Using activerecord 5.0.3
Using spring-commands-rspec 1.0.4
Using spring-watcher-listen 2.0.1
Using actionview 5.0.3
Using actionpack 5.0.3
Using actioncable 5.0.3
Using actionmailer 5.0.3
Using axlsx_rails 0.5.1
Using railties 5.0.3
Using gon 6.1.0
Using sprockets-rails 3.2.0
Using rails-controller-testing 0.1.1
Using simple_form 3.5.0
Using coffee-rails 4.2.2
Using responders 2.4.0
Using factory_girl_rails 4.8.0
Using jquery-rails 4.3.1
Using rspec-rails 3.6.0
Using web-console 3.5.1
Using rails 5.0.3
Using sass-rails 5.0.6
Using devise 4.3.0
Bundle complete! 33 Gemfile dependencies, 105 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.

rails -v returns;

Rails 5.0.3

ruby -v returns;

ruby 2.3.0p0

gem list returns;

    *** LOCAL GEMS ***

actioncable (5.0.3, 5.0.0.1)
actionmailer (5.0.3, 5.0.0.1)
actionpack (5.0.3, 5.0.0.1)
actionview (5.0.3, 5.0.0.1)
activejob (5.0.3, 5.0.0.1)
activemodel (5.0.3, 5.0.0.1)
activerecord (5.0.3, 5.0.0.1)
activesupport (5.0.3, 5.0.0.1)
addressable (2.5.1)
ansi (1.5.0)
arel (7.1.4, 7.1.1)
autoprefixer-rails (7.1.1.2, 6.4.1)
axlsx_rails (0.5.1)
bcrypt (3.1.11)
bigdecimal (default: 1.2.8)
bindex (0.5.0)
bootstrap-will_paginate (0.0.10)
builder (3.2.3, 3.2.2)
bundler (1.13.6)
bundler-unload (1.0.2)
byebug (9.0.6, 9.0.0)
cancancan (1.17.0)
capybara (2.14.0)
carrierwave (0.11.2)
CFPropertyList (2.3.2)
childprocess (0.7.0)
coderay (1.1.1)
coffee-rails (4.2.2, 4.2.1)
coffee-script (2.4.1)
coffee-script-source (1.12.2, 1.10.0)
concurrent-ruby (1.0.5, 1.0.2)
database_cleaner (1.6.1)
debug_inspector (0.0.2)
devise (4.3.0)
did_you_mean (1.0.2, 1.0.0)
diff-lcs (1.3)
erubis (2.7.0)
excon (0.52.0)
execjs (2.7.0)
executable-hooks (1.3.2)
factory_girl (4.8.0)
factory_girl_rails (4.8.0)
faker (1.6.6, 1.6.3)
ffi (1.9.18, 1.9.14)
fission (0.5.0)
fog (1.38.0)
fog-aliyun (0.1.0)
fog-atmos (0.1.0)
fog-aws (0.11.0)
fog-brightbox (0.11.0)
fog-cloudatcost (0.1.2)
fog-core (1.42.0)
fog-dynect (0.0.3)
fog-ecloud (0.3.0)
fog-google (0.1.0)
fog-json (1.0.2)
fog-local (0.3.0)
fog-openstack (0.1.12)
fog-powerdns (0.1.1)
fog-profitbricks (0.0.5)
fog-rackspace (0.1.1)
fog-radosgw (0.0.5)
fog-riakcs (0.1.0)
fog-sakuracloud (1.7.5)
fog-serverlove (0.1.2)
fog-softlayer (1.1.4)
fog-storm_on_demand (0.1.1)
fog-terremark (0.1.0)
fog-vmfusion (0.1.0)
fog-voxel (0.1.0)
fog-vsphere (1.0.1)
fog-xenserver (0.2.3)
fog-xml (0.1.2)
formatador (0.2.5)
gem-wrappers (1.2.7)
globalid (0.4.0, 0.3.7)
gon (6.1.0)
guard (2.13.0)
guard-compat (1.2.1)
guard-minitest (2.4.4)
htmlentities (4.3.4)
i18n (0.8.1, 0.7.0)
inflecto (0.0.2)
io-console (0.4.6, default: 0.4.5)
ipaddress (0.8.3)
jbuilder (2.6.4, 2.4.1)
jquery-rails (4.3.1, 4.1.1)
json (2.1.0, 2.0.2, default: 1.8.3)
listen (3.0.8)
loofah (2.0.3)
lumberjack (1.0.10)
mail (2.6.5, 2.6.4)
method_source (0.8.2)
mime-types (3.1)
mime-types-data (3.2016.0521)
mimemagic (0.3.2)
mini_magick (4.5.1)
mini_portile2 (2.1.0)
minitest (5.10.2, 5.9.1, 5.9.0, 5.8.3)
minitest-reporters (1.1.9)
multi_json (1.12.1)
nenv (0.3.0)
net-telnet (0.1.1)
nio4r (2.0.0, 1.2.1)
nokogiri (1.7.2, 1.6.8.1, 1.6.8)
notiffany (0.1.1)
orm_adapter (0.5.0)
pg (0.20.0, 0.18.4)
pkg-config (1.1.7)
popper_js (1.9.9)
power_assert (0.3.1, 0.2.6)
pry (0.10.4)
pry-rails (0.3.6)
psych (2.2.0, default: 2.0.17)
public_suffix (2.0.5)
puma (3.8.2, 3.4.0)
rack (2.0.3, 2.0.1)
rack-test (0.6.3)
rails (5.0.3, 5.0.0.1)
rails-controller-testing (0.1.1)
rails-dom-testing (2.0.3, 2.0.1)
rails-html-sanitizer (1.0.3)
railties (5.0.3, 5.0.0.1)
rake (12.0.0, 11.3.0, 11.2.2, 10.4.2)
rb-fsevent (0.9.8, 0.9.7)
rb-inotify (0.9.8, 0.9.7)
rbvmomi (1.8.2)
rdoc (5.0.0, default: 4.2.1)
request_store (1.3.2)
responders (2.4.0)
rspec-core (3.6.0)
rspec-expectations (3.6.0)
rspec-mocks (3.6.0)
rspec-rails (3.6.0)
rspec-support (3.6.0)
ruby-progressbar (1.8.1)
rubygems-bundler (1.4.4)
rubygems-update (2.6.12, 2.6.8)
rubyzip (1.2.1)
rvm (1.11.3.9)
sass (3.4.24, 3.4.22)
sass-rails (5.0.6)
selenium-webdriver (3.4.0)
shellany (0.0.1)
shoulda-matchers (3.1.1)
simple_form (3.5.0)
slop (3.6.0)
spring (2.0.2, 1.7.2)
spring-commands-rspec (1.0.4)
spring-watcher-listen (2.0.1, 2.0.0)
sprockets (3.7.1, 3.7.0)
sprockets-rails (3.2.0)
sqlite3 (1.3.11)
test-unit (3.2.2, 3.1.5)
thor (0.19.4, 0.19.1)
thread_safe (0.3.6, 0.3.5)
tilt (2.0.7, 2.0.5)
trollop (2.1.2)
turbolinks (5.0.1)
turbolinks-source (5.0.3, 5.0.0)
tzinfo (1.2.3, 1.2.2)
uglifier (3.2.0, 3.0.0)
validates_email_format_of (1.6.3)
warden (1.2.7)
watir (6.2.1)
web-console (3.5.1, 3.1.1)
websocket (1.2.4)
websocket-driver (0.6.5, 0.6.4)
websocket-extensions (0.1.2)
will_paginate (3.1.0)
xml-simple (1.1.5)
xpath (2.1.0)
jbk
  • 1,911
  • 19
  • 36

3 Answers3

0

If this is still helpful, what ended up working for me was manually adding the popper.js gem to my gemfile and running bundle. All bootstrap styles available afterwards. Who knows, perhaps in the next few days it will be integrated to bundle together? :)

Michelle G
  • 13
  • 4
  • Gave up on it for now tbh @michelle-g, but once back on js code in my app I'll try your solution to see whether it works for me too, thanks for posting it. – jbk Jul 04 '17 at 19:24
0

Try putting //= require popper before //= require bootstrap & //= require bootstrap-sprockets

mdh1
  • 11
  • 1
-3

Hi in my small experience i have always seem to get it working by following these steps.

Gemfile

gem 'bootstrap-sass', '~> 3.2.0'

application.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

aplication.js

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

run bundle start server

As for bootstrap-rubygem

Gemfile

gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'

application.scss

@import "bootstrap";

application.js

//= require jquery
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .

please note if order is altered it throws errors

Tested in static page by having this element

<div class="alert alert-danger">
   <h1>sample</h1>
</div>

Some elements are no longer available in Bootstrap 4 like class "well" so check elements available in documentation.

Community
  • 1
  • 1
Artem Ankudovich
  • 458
  • 2
  • 14
  • What im trying to say is try updating `aplication.scss` to `aplication.css.scss` And adding `@import "bootstrap-sprockets";` in it – Artem Ankudovich Jun 21 '17 at 15:16
  • Thanks Artem, but I am trying to use the `bootstrap-rubygem` bootstrap4 gem, not the bootstrap-sass gem which is bootstrap3 (that is correct I belive?). I can get everything working fine with `bootstrap-saas` and indeed it was before i started this whole attempted move to bootstrap4. – jbk Jun 21 '17 at 15:40
  • Appologies i was no assistance. I did however went on and tested it and i think your issue is in js require ordering i will update my answer to show steps i followed. – Artem Ankudovich Jun 22 '17 at 07:28
  • Unfortunately following all of your instructions above, as I did the same instructions from the bootstrap-rubygem githib page, results in no bootstrap styles working, styles I've written are available in Bootstrap 4. – jbk Jun 22 '17 at 09:12
  • Sorry again. Probably last chance for me to deem useful have a look at this https://stackoverflow.com/questions/38668278/bootstrap-with-rails-5 – Artem Ankudovich Jun 22 '17 at 09:26
  • No worries, no last chance at all, but I have done these searches myself too for hours looking for the problem and have not found a solution, thus my question. That link was nothing to do with the configuration of bootstrap into rails env either I'm afraid. – jbk Jun 22 '17 at 09:29