Bootstrap styling not being applied to Rails page - ruby-on-rails

I'm new to Rails, so have been following an online video tutorial building a project.
I've been trying to add Bootstrap, but even after
Adding the Gem,
Doing a bundle install,
Restarting the mysql server, and
Adding the scss #bootsrap import to the application.css.scss file,
It's still not pulling though to my index page.
Is there something I'm missing?
Here's my application.css.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_self
*/
// Custom bootstrap variables must be set or imported before bootstrap itself.
#import "bootstrap-sprockets";
#import "bootstrap";
Here's my gem file:
source 'https://rubygems.org'
gem 'rails', '4.2.6'
gem 'sqlite3'
gem 'simple_form', '>= 3.2.1'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
group :development, :test do
gem 'byebug'
end
group :development do
gem 'web-console', '~> 2.0'
end
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
Thanks!

Please add in your application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
And add in your application.css
#import "bootstrap-sprockets";
#import "bootstrap";
#import 'bootstrap/theme';

Related

Can't make Bootstrap working in Ruby on rails app

I am struggling to adapt bootstrap 4 working in my Rails application. I have followed the instructions from here and here. I have placed simple navbar
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
in my application.html.erb file but nothing changed. After a few hours of searching I found same questions here but no any working solution.
This is my Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.3.3'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.0'
# Use postgresql as the database for Active Record
gem 'pg', '>= 0.18', '< 2.0'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported
runtimes
# gem 'mini_racer', platforms: :ruby
# 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', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false
group :development, :test do
end
group :development do
# Access an interactive console on exception pages or by calling
'console' anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data
gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'pry-rails', group: [:development, :test]
gem 'jquery-rails'
gem 'dotenv-rails', group: [:development, :test]
gem 'rspec-rails', group: [:development, :test]
gem 'capybara', group: [:development, :test]
gem 'launchy', group: [:development, :test]
gem 'factory_bot', group: [:development, :test]
gem 'database_cleaner', group: [:development, :test]
gem 'valid_attribute', group: [:development, :test]
gem 'shoulda-matchers', group: [:development, :test], require: false
gem 'devise'
gem 'bootstrap', '~> 4.1.3'
gem 'webpacker', '~> 3.3'
This is my app/stylesheets/application.scss
/*
* This is a manifest file that'll be compiled into application.css,
which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory,
lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a
relative path.
*
* You're free to add application-wide styles to this file and
they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over
styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after
the
* It is generally better to create a new file per style scope.
*
#import 'bootstrap';
*/
here is my app/javascripts/application.js
// This is a manifest file that'll be compiled into application.js,
which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory,
lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a
relative path.
//
// It's not advisable to add code directly here, but if you do, it'll
appear at the bottom of the
// compiled file. JavaScript code in this file should be added after
the last require_* statement.
//
// Read Sprockets README
(https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-sprockets
//= require popper
//= require activestorage
//= require_tree .
Please help if you know how to set it up right. Thank you in advance.
#import 'bootstrap'; should be outside of your comments
/*
* This is a manifest file that'll be compiled into application.css,
which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory,
lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a
relative path.
*
* You're free to add application-wide styles to this file and
they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over
styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after
the
* It is generally better to create a new file per style scope.
*
*/
#import 'bootstrap';

Bootstrap Rails Not Working

Hello everyone I have installed bootstrap for my application, and it is not working out to well. Here is my application.scss file
#import "bootstrap-sprockets";
#import "bootstrap";
Here is my application.rb file:
<!DOCTYPE html>
<html>
<head>
<title>BootstrapApp</title>
<%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track' => true%>
<%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
application.js file:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
Finally here is my Gem File:
source 'http://rubygems.org'
gem 'bootstrap-sass', '~> 3.3.5'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# 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
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
Here is what I am getting when trying to add a navbar to my webpage:
The problem is you're not requiring application.scss and application.js.
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true%>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
If you are getting the Object does not support the property or method error, then use the latest gem for "coffee-script-source" (like 1.10.0) - anything other than version 1.9.x.
Add the following line to Gemfile, run bundle install and restart the server.
gem 'coffee-script-source', '~> 1.11', '>= 1.11.1'
I finally got this to work. this link provided me with my solution. Thanks to everyone who helped me on this post, it was greatly appreciated and a great learning experience :)

Why am I getting *unmatched OUTDENT* in this haml template in Rails 4.2 application?

I've been playing with react-rails gem and so I made a sample application with haml. When I do rails s and go to my sample route, I see the attached error coming from application.html.haml, the standard layout/application.html.haml view in Rails 4.2. If I remove stylesheet_link_tag and javascript_include_tag the Rails view renders fine. What could be causing it? Below are the relevant files. There is also a sample.coffee file but I can't imagine that has anything to do with it since as soon as I remove the *_tag helpers the Rails view renders without error.
application.js.coffee
# This is a manifest file that'll be compiled into application.js, which will include all the files
# listed below.
#
# Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
# or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
#
# It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
# compiled file.
#
# Read Sprockets README (https:#github.com/rails/sprockets#sprockets-directives) for details
# about supported directives.
#
#= require jquery
#= require jquery_ujs
#= require react
#= require react_ujs
#= require components
#= require_tree .
application.html.haml
!!!
%html
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%title SampleApp
= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'
= csrf_meta_tags
%body
= yield
application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 4.2.5'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# 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.1.0'
# 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 following links in your web application faster. Read more: https://github.com/rails/turbolinks
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
gem 'react-rails', '~> 1.6.0'
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
gem 'httparty'
gem 'haml-rails'
gem 'annotate'
gem 'figaro'
gem 'pundit'
gem 'lol_dba', require: false
gem 'foreman'
gem 'newrelic_rpm'
group :development do
gem 'sextant'
gem 'awesome_print', require: false
gem 'hirb', require: false
gem 'bullet'
gem 'flog', require: false
gem 'flay', require: false
gem 'reek', require: false
gem 'derailed'
gem 'stackprof'
gem 'sandi_meter'
gem 'rubocop', require: false
end
group :development, :test do
gem 'spring-commands-rspec'
gem 'rspec-rails'
gem 'guard-rspec'
gem 'pry'
end
group :test do
gem 'factory_girl_rails'
gem 'capybara'
gem 'database_cleaner'
gem 'launchy'
gem 'codeclimate-test-reporter', require: nil
gem 'shoulda-matchers', require: false
end
group :production, :staging do
gem 'rails_12factor'
gem 'puma'
end

File to import not found or unreadable: bootstrap-sprockets

I am trying to install bootstrap into my application and am having all kinds of problems. I have pasted my gemfile, application.js and error codes. I am not sure what I am doing wrong here and any help would be greatly appreciated.
styles.css.scss
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
gem file
source 'http://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.8'
# Use sqlite3 as the database for Active Record
group :development do
gem 'sqlite3'
gem 'capistrano'
end
group :production do
gem 'pg'
gem 'mysql2'
gem 'activerecord-mysql-adapter'
end
# Use SCSS for stylesheets
group :assets do
gem 'coffee-rails'
gem 'bootstrap-sass', '~> 3.3.3'
gem 'sass-rails', '>= 3.2'
end
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Use debugger
# gem 'debugger', group: [:development, :test]
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin]
application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
this is my error
WARN: tilt autoloading 'sass' in a non thread-safe way; explicit require 'sass' suggested.
Completed 500 Internal Server Error in 722ms
ActionView::Template::Error (File to import not found or unreadable: bootstrap-sprockets.
Load paths:
C:/Sites/jeepjig/app/assets/images
C:/Sites/jeepjig/app/assets/javascripts
C:/Sites/jeepjig/app/assets/stylesheets
C:/Sites/jeepjig/vendor/assets/javascripts
C:/Sites/jeepjig/vendor/assets/stylesheets
C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/turbolinks-2.5.2/lib/assets/javascripts
C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/jquery-rails-3.1.2/vendor/assets/javascripts
(in C:/Sites/jeepjig/app/assets/stylesheets/styles.css.scss:2)):
3: <head>
4: <%= tag :meta, name: "viewport", content: "width=device-width, initial-scale=1.0" %>
5: <title>JeepJig</title>
6: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
7: <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
8: <%= csrf_meta_tags %>
9:
app/assets/stylesheets/styles.css.scss:2
app/views/layouts/application.html.erb:6:in `_app_views_layouts_application_html_erb__1034748832_48995988'
Rendered C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/actionpack-4.1.8/lib/action_dispatch/middleware/templ
ates/rescues/_trace.html.erb (3.0ms)
Rendered C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/actionpack-4.1.8/lib/action_dispatch/middleware/templ
ates/rescues/_request_and_response.html.erb (2.0ms)
Rendered C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/actionpack-4.1.8/lib/action_dispatch/middleware/templ
ates/rescues/template_error.html.erb within rescues/layout (53.0ms)
Update:
I removed
group :assets do
and now I am not longer getting the error.
I guess this was depreciated in R4
I found this link, quickly realized I was having the issue because I had installed the boostrap-sass, and done a bundled install without restarting the rails server.
I hope to provide this as a reminder for any others that find their way here and can't see why it's not working.
remove group :assets in Gemfile whereas specify like this
gem 'bootstrap-sass', :git => 'https://github.com/twbs/bootstrap-sass.git', :branch => 'next'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
gem 'autoprefixer-rails'

Rails 4: Not able to require Bootstrap

I am following Tuts+ tutorial on "Building a Polling Application in Rails". I have followed along with every foundational step to configure the app.
With the 'bootsrap-sass' gem installed, he simply adds the *= require bootstrap to the application.css file and instantly sees the changed results on his server. However, I receive the following error..
localhost:3000
Sprockets::FileNotFound in Polls#index
couldn't find file 'bootstrap'
(in /RAILS/tutspolls/app/assets/stylesheets/application.css:13)
Extracted source (around line #5):
<html>
<head>
3 <title>Tutspolls</title>
4 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
5 <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
6 <%= csrf_meta_tags %>
</head>
This is what my files are looking like..
Gemfile.rb
source 'https://rubygems.org'
gem 'rails', '4.1.6'
gem 'sqlite3'
gem 'sass-rails', '~> 4.0.5'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'haml-rails'
gem 'pry-rails'
gem 'bootstrap-sass'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'spring', group: :development
group :test do
gem 'factory_girl_rails'
gem 'minitest-rails'
end
stylesheets/application.css
*= require bootstrap
*= require_tree .
*= require_self
*/
..and this was added to config/application.rb
config.sass.preferred_syntax = :sass
Through a google search as well as similar questions on Stackoverflow, I find similar issues with answers that are not working for me. My guess is that other it's a version issue or simply my lack of understanding between the asset pipeline and gem architecture.
According to readme you need:
1) Remove old application.css and create application.css.scss
2) In new application.css.scss include this lines:
#import "bootstrap-sprockets";
#import "bootstrap";
and #import "bootstrap-sprockets" must be imported before #import "bootstrap".
I see that you mentioned stylesheets/application.rb file. What's this? Why do you use sass syntax in .rb file? Why do you use *= instead of #import? Where's importing of bootstrap-sprockets? Why do you skip it?
After looking over the versions of Bootstrap, I realized the tutorial is slightly older, so I switched from the defaulted bootstrap-sass which is version '~> 3.2.0' to ~> 3.1.1 and it works great.
Apparently the latest version of bootstrap-sass does not support *= require bootstrap and rather uses the #import which is current in the readme file. With the earlier version, I do not need to use #import 'bootstrap-sprockets' when utilizing*=`.

Resources