How to use Bootstrap 3 RC with Rails 4

Question

I'm trying to migrate from Bootstrap 2, to version 3 RC1 in a Rails 4 project.

Initially I used bootstrap-sass gem 2.3.2 and everything worked smoothly.

How can i add Boostrap 3 to my project now? I can't find any gem already converted to SASS and the official documentation tells to compile it into CSS from LESS.

I'm fairly new to all of this so i'm really getting confused here, any help?

UPDATE Seems like the gem i was using in the first place has been finally updated: https://github.com/twbs/bootstrap-sass

Solution 1

try using https://github.com/anjlab/bootstrap-rails

by adding the following to your Gemfile:

gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
                          :github => 'anjlab/bootstrap-rails',
                          :branch => '3.0.0'

In your application.js add the following:

//= require twitter/bootstrap

In your application.css add the following before anything else:

 *= require twitter/bootstrap

Solution 2

There is already release candidate that you can use, add to GemFile:

gem 'bootstrap-sass', github: 'thomas-mcdonald/bootstrap-sass'

Additionally if you upgrade from bootstrap 2 then you have to remove previous gem before.

Solution 3

I tried the solution suggested by ShenoudaB and got it to work just fine. Things I needed to change from the previous version were:

• In your application.css.scss file, make sure you are referencing twitter/bootstrap instead of just bootstrap.
• I also needed to add an @import "twitter/bootstrap"; line to my css. This may be redundant with the above tip, but once I added it, it worked fine.
• In your application.js file, you should reference twitter/bootstrap in your //=require statement.

I also noticed that some of the styles changed. Check the new documentation and make sure your class names match the new ones.

That's all I did and it worked for me. Good luck getting your app to work!

Solution 4

Why not the official one

https://github.com/twbs/bootstrap-sass

Thanks

Solution 5

Since you are already using bootstrap-sass gem

I'd recommend this

http://github.com/thomas-mcdonald/bootstrap-sass/tree/3

View more solutions

Comments

[Pauls]

I tried this yesterday pretty quick and I had problems launching the server after running the bundle install with the new gem. Can someone confirm that this works?I might spend some time today debugging it tho.

[pastullo]

Thanks! Also needed to follow advices from Andrew Patzer below

[Meltemi]

Has the bootstrap-sass gem fully upgraded to Bootstrap 3? Anyone successfully using it (and the javascript components) with a Rails 4 app?

[pastullo]

will the master branch ever be updated to use Bootstrap 3 by default?

[Kopty]

I'm really surprised this has 15 upvotes and is marked as the correct answer. This didn't work.

[lambinator]

Just tried it and it worked great for me, perhaps bibstha's edits added the necessary info?

[exbinary]

Looks like branch '3' was merged into 'master' on 9/9/2013, so the branch: '3' option above is no longer necessary. Not released yet though, so we still have to fetch from github.

[Daryll Santos]

Thanks. Maybe this will help, the "advice from Andre Patzer" is adding @import "twitter/bootstrap" to the .css.scss file, in addition to `require twitter/bootstrap' in the application.css file.

[jazzytomato]

@Daryll Santos not in addition but instead of 'require/twitter/bootstrap'. importing the file allows you to use mixins

[Linus]

Thanks from rescuing me from getting nearly insane!