8

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]
M.Shaikh
  • 250
  • 1
  • 3
  • 14
  • 1
    [This](https://github.com/twbs/bootstrap-sass/blob/master/README.md) pretty much covers what you need to do. – Sagar Pandya Sep 25 '16 at 22:22
  • I did this but still it is not working, I even tried without gems by directly installing the bootrap.css and bootstrap.min.css and included in the application.css.sass but still it does not work. – M.Shaikh Sep 25 '16 at 22:27
  • According to https://rubyplus.com/articles/3981-Integrating-Twitter-Bootstrap-4-with-Rails-5 sprockets should bot be used in bootstrap 4 or else it will give the error File to import not found or unreadable – M.Shaikh Sep 25 '16 at 23:03
  • If you have solved your issue please write an answer below (yes you're allowed to answer your own question). It may help others in the future. – Sagar Pandya Sep 25 '16 at 23:05
  • No its not solved yet but if I solve it I will definitely write the solution here – M.Shaikh Sep 25 '16 at 23:39
  • The last readme file was for bootstrap 3; [This link](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) is for bootstrap 4, so the answer should be in here somewhere- unless you've already looked. – Sagar Pandya Sep 26 '16 at 00:01
  • 1
    @M.Shaikh please post your `application.css` and your view file – BigRon Jan 11 '17 at 19:01
  • @M.Shaikh I don't think this is the problem, but why are you including the [`bootstrap gem` for bootstrap 4](https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails) && the [`bootstrap-sass` gem for bootstrap 3](https://github.com/twbs/bootstrap-sass#bootstrap-for-sass)? Conflicting versions of Bootstrap. Get rid of `bootstrap-sass` – BigRon Jan 11 '17 at 19:19

3 Answers3

4

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:

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.

Community
  • 1
  • 1
wjordan
  • 19,770
  • 3
  • 85
  • 98
3

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'

Darex1991
  • 855
  • 1
  • 10
  • 24
1

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.

bxorcloud
  • 659
  • 1
  • 7
  • 20