How to implement bootstrap 4 and rails 5

Question

I am new to ruby ​​and I am trying to enable bootstrap 4.0.0.alpha4 in rails 5.0.0. I installed bootstrap gems, bootstrap-sass, autoprefixer-rails, and I even used the "bootstrap" @import in application.css.sass, but still I don't get the loading page on the page. I have a button on where I am trying to implement a bootstrap project. I even tried it in different projects, none of them work. Any help would be greatly appreciated. Thanks.
Codes are shown below. Gem file

source 'https://rubygems.org' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.0.0' # Use postgresql as the database for Active Record gem 'pg', '~> 0.18' # Use Puma as the app server gem 'puma', '~> 3.0' gem 'bootstrap' gem 'bootstrap-sass' gem 'autoprefixer-rails' gem 'wdm' # 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' 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] 

Answer 1

For official reference code to enable Bootstrap in Rails, see test/dummy_rails project skeleton in official bootstrap-rubygem . This project is used in integration tests, so you know that it will work with the latest version of Bootstrap self-tuning and any version of Ruby / Rails in the project’s test matrix.

Verify that these lines of code (or equivalent) have been added to the Rails project:

• //= require bootstrap-sprockets in app/assets/javascripts/application.js
• @import bootstrap in app/assets/stylesheets/application.sass
• config.assets.precompile += %w( application.css application.js ) in config/application.rb
• run rake assets:precompile

If you still have problems, send the full source code to the Rails application or enough to serve as a Minimal, complete and testable example that creates your problem. It is always possible that something that you changed locally that you did not think about, but is really important.

Answer 2

Great link and here is my configuration:

Gemfile:

 gem 'compass-rails', '2.0.4' gem 'bootstrap-sass', '~> 3.1.1.1' gem 'autoprefixer-rails', '6.3.7' gem 'sass-rails', '~> 5.0.1' 

configurations / Initializers / assets.rb

 Rails.application.config.assets.version = '1.0' Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'fonts') 

And in my sass files tree:

 app/assets/stylesheets | |--components | | | |--variables, | |--mixins and another css/sass files | |--bootstrap.sass |--application.sass 

application.sass:

 @import 'bootstrap' @import 'components/*' 

bootstrap.sass:

 // Core variables and mixins @import 'bootstrap/variables' @import 'bootstrap/mixins' // Reset @import 'bootstrap/normalize' //@import 'bootstrap/print' // Core CSS //@import 'bootstrap/scaffolding' 

Title:

= stylesheet_link_tag 'application', media: 'all'

Answer 3

You can download the bootstrap file https://v4-alpha.getbootstrap.com/ , and then copy and paste them into your assets (provider) file and then import it into the application, calling it in application.js and application.css or calling it what you call your other js and css files. That way you can use boostrap.