how to implement bootstrap 4 and rails 5

Question

I am new to ruby and I am trying to include bootstrap 4.0.0.alpha4 into rails 5.0.0. I have installed the gems bootstrap,bootstrap-sass, autoprefixer-rails and I have even used @import "bootstrap" in the application.css.sass, but still I am not getting the bootstrap on the page.I have a button on the view where I am trying to implement the bootstrap design. I have even tried it on different projects ut none of them works. Any help would be appreciated. Thanks.
The codes are as 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 for including Bootstrap into Rails, see the test/dummy_rails project skeleton in the official bootstrap-rubygem project. This project is used in integration-tests so you know it will work with the latest version of the Bootstrap gem and any version of Ruby/Rails in the project's test matrix.

Make sure these lines of code (or equivalent) have been added to your 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 continue to have issues, post full source code to your Rails app or enough to serve as a Minimal, Complete and Verifiable Example that produces your issue- there's always a possibility that something you've changed locally that you haven't thought about but is actually important.

Answer 2

Great link and here is my config:

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'

config/initializers/assets.rb

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

And on 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'

header:

= stylesheet_link_tag 'application', media: 'all'

Answer 3

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