How do I switch from using the twitter-Bootstrap-rails gem to using normal Bootstrap

Question

I have a rails app that was built with the Bootstrap rails gem for development, but now I am going to start doing design and styling stuff and I would rather just move to referencing bootstrap normally/locally. The app is based on the rails3-bootstrap-devise-cancan template.

I tried just removing the bootstrap-sass gem and then deleting all of the stylesheets and .js files in /assets, and replacing the application.css and application.js with bootstrap.css and bootstrap.js. But when I launch the application, I can see it is grabbing certain things from bootstrap, but the formatting is wrong and a lot of interface things don't work.

What is the easiest cleanest way to make the switch?

source 'https://rubygems.org'
gem 'rails', '3.2.13'
gem 'sqlite3'
gem 'mysql2'
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'uglifier', '>= 1.0.3'
end
gem "rspec-rails", ">= 2.12.2", :group => [:development, :test]
gem "database_cleaner", ">= 1.0.0.RC1", :group => :test
gem "email_spec", ">= 1.4.0", :group => :test
gem "cucumber-rails", ">= 1.3.1", :group => :test, :require => false
gem "launchy", ">= 2.2.0", :group => :test
gem "capybara", ">= 2.0.3", :group => :test
gem "factory_girl_rails", ">= 4.2.0", :group => [:development, :test]
gem "bootstrap-sass", ">= 2.3.0.0"
gem "devise", ">= 2.2.3"
gem "cancan", ">= 1.6.9"
gem "rolify", ">= 3.2.0"
gem "simple_form", ">= 2.1.0"
gem "quiet_assets", ">= 1.0.2", :group => :development
gem "figaro", ">= 0.6.3"
gem "better_errors", ">= 0.7.2", :group => :development
gem "binding_of_caller", ">= 0.7.1", :group => :development, :platforms => [:mri_19, :rbx]
gem 'execjs'
gem 'jquery-rails'
gem 'jquery-ui-rails'

Did you actually replace application.css with bootstrap.css? What other CSS/JS did you delete, are you sure they weren't needed for you to get the expected results? — lime
Posted gem file. I deleted all the css and js files. dropped bootstrap.css into the css folder and renamed it application.css. Did the same for the javascript file. — user2360274

lime lime · Accepted Answer · 2013-08-16T07:31:30

The bootstrap-less gem should not affect the files in your own app/assets folder, instead they are fetched from each gem's corresponding folders. My guess is that the CSS/JS assets you deleted were not put there by the gem, but by you or someone else working on the project.

Instead of replacing application.css and application.js with the Bootstrap files, you should add them to your assets folder and import them into the application files. Thus, if you have any other assets, they can too be imported into the same files.

Usually, all files in the same folder are automatically imported. My application.css by default includes this comment which instructs it to include all CSS files in the same directory tree:

 *= require_tree .

You should probably read up on how the Asset Pipeline works, that makes it easier to find out where the problem lies.

How do I switch from using the twitter-Bootstrap-rails gem to using normal Bootstrap

1 Answers