CODEWITHSUNDEEP
twitter-bootstrapruby-on-rails-4twitter-bootstrap-3
pastullo
pastullo

Reputation: 4201

How to use Bootstrap 3 RC with Rails 4

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

Upvotes: 20

Views: 26208

Answers (7)

Siddhartha Mukherjee
Siddhartha Mukherjee

Reputation: 6228

Why not the official one

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

Thanks

Upvotes: 5

TSr
TSr

Reputation: 341

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.

Upvotes: 17

valk
valk

Reputation: 9874

And somehow nobody mentioned http://alademann.github.io/sass-bootstrap/ and I wonder why.

Upvotes: 0

wael
wael

Reputation: 386

Ther is a twitter bootsrap 3 gem : https://github.com/yabawock/bootstrap-sass-rails

Upvotes: 1

ShenoudaB
ShenoudaB

Reputation: 557

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

Upvotes: 29

zabumba
zabumba

Reputation: 12402

Since you are already using bootstrap-sass gem

I'd recommend this

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

Upvotes: 2

Andrew Patzer
Andrew Patzer

Reputation: 255

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!

Upvotes: 6

Related Questions