Installing Bootstrap 3 on Rails App

Question

I m trying to install Bootstrap 3 0 on my Rails app  I recently finished Michael Hartl s tutorial and am now trying to build my own system using this new version of Bootstrap  but I have a few questions that I m not sure about   My system specs    OS X Mountain Lion on MBP Rails 4 0 Ruby 2 0   Questions I have    What is the best gem to use in my Gemfile  I have found a few of them  What do I import on my custom css scss  I read somewhere that it s different from 2 3 2  Is there anything else I have to do to get Bootstrap to work  or are the remaining steps identical to the ones I followed for Bootstrap 2 3 2    Edit  Here is what the bootstrap-rails project on GitHub first says to do   gem  anjlab-bootstrap-rails    require   gt   bootstrap-rails                                  github   gt   anjlab bootstrap-rails    Then it says to do   gem  anjlab-bootstrap-rails     gt   3 0 0 0    require   gt   bootstrap-rails    Do they do the same thing  or do you have to do them both

User · Answer

This answer is for those of you looking to Install Bootstrap 3 in your Rails app without using a gem. There are two simple ways to do this that take less than 10 minutes. Pick the one that suites your needs best. Glyphicons and Javascript work and I've tested them with the latest beta of Rails 4.1.0 as well.

Using Bootstrap 3 with Rails 4 - The Bootstrap 3 files are copied into the vendor directory of your application.
Adding Bootstrap from a CDN to your Rails application - The Bootstrap 3 files are served from the Bootstrap CDN.

Number 2 above is the most flexible. All you need to do is change the version number that is stored in a layout helper. So you can run the Bootstrap version of your choice, whether that is 3.0.0, 3.0.3 or even older Bootstrap 2 releases.

User · Answer

I actually had an easy workaround on this one in which I nearly scratch my head on how to make it work  hahah   Well  first I downloaded Bootstrap  the compiled css and js version    Then I pasted all the bootstrap css files to the app assets stylesheets    And then I pasted all the bootstrap js files to the app assets javascripts    I reloaded the page and wallah  I just added bootstrap in my RoR

User · Answer

gem bootstrap-sass  bootstrap-sass is easy to drop into Rails with the asset pipeline   In your Gemfile you need to add the bootstrap-sass gem  and ensure that the sass-rails gem is present - it is added to new Rails applications by default   gem  sass-rails     gt   3 2    sass-rails needs to be higher than 3 2 gem  bootstrap-sass      gt  3 0 3 0   bundle install and restart your server to make the files available through the pipeline   Source  http   rubydoc info gems bootstrap-sass 3 0 3 0 frames

User · Answer

Using this branch will hopefully solve the problem   gem  twitter-bootstrap-rails     git   git   github com seyhunak twitter-bootstrap-rails git     branch   bootstrap3

User · Answer

Twitter now has a sass-ready version of bootstrap with gem included  so it is easier than ever to add it to Rails   Simply add to your gemfile the following   gem  sass-rails     gt   3 2    sass-rails needs to be higher than 3 2 gem  bootstrap-sass      gt  3 1 1    bundle install and restart your server to make the files available through the pipeline   There is also support for compass and sass-only  https   github com twbs bootstrap-sass

User · Answer

For me  the simplest way to do this is  1  Download and unzip bootstrap into vendor  2  Add the bootstrap path to your config  config assets paths  lt  lt  Rails root join  vendor bootstrap-3 3 6-dist     3  Require them  in css    require css bootstrap  in js     require js bootstrap  Done   This methods makes the fonts load without any other special configuration and doesn t require moving the bootstrap files out of their self-contained directory

User · Answer

Actually you don t need gem for this  here is the step to install Bootstrap 3 in RoR   Download Bootstrap Copy    bootstrap-dist css bootstrap css and bootstrap-dist css bootstrap min css   To  vendor assets stylesheets Copy   bootstrap-dist js bootstrap js and bootstrap-dist js bootstrap min js   To  vendor assets javascripts Update  app assets stylesheets application css by adding      require bootstrap min  Update  app assets javascripts application jsby adding       require bootstrap min    With this you can update bootstrap any time you want  don t need to wait gem to be updated  Also with this approach assets pipeline will use minified versions in production

User · Answer

I use https   github com yabawock bootstrap-sass-rails  Which is pretty much straight forward install  fast gem updates and followups and quick fixes in case is needed

User · Answer

As many know  there is no need for a gem   Steps to take    Download Bootstrap   Direct download link Bootstrap 3 1 1 Or got to http   getbootstrap com   Copy   bootstrap dist css bootstrap css bootstrap dist css bootstrap min css    to  app assets stylesheets Copy   bootstrap dist js bootstrap js bootstrap dist js bootstrap min js    to  app assets javascripts Append to  app assets stylesheets application css        require bootstrap  Append to  app assets javascripts application js         require bootstrap    That is all  You are ready to add a new cool Bootstrap template     Why app  instead of vendor    It is important to add the files to app assets  so in the future you ll be able to overwrite Bootstrap styles   If later you want to add a custom css scss file with custom styles  You ll have something similar to this in application css       require bootstrap                                                                 require custom     If you placed the bootstrap files in app assets  everything works as expected  But  if you placed them in vendor assets  the Bootstrap files will be loaded last  Like this    lt link href   assets custom css body 1  media  screen  rel  stylesheet  gt   lt link href   assets bootstrap css body 1  media  screen  rel  stylesheet  gt    So  some of your customizations won t be used as the Bootstrap styles will override them   Reason behind this  Rails will search for assets in many locations  to get a list of this locations you can do this     rails console  gt  Rails application config assets paths   In the output you ll see that app assets takes precedence  thus loading it first

User · Answer

I think the most up to date gem for the new bootstrap version is form anjlab   But I don t know if it currently works good with other gems like simple form when you do rails generate simple form install --bootstrap  etc  you may have to edit some initializers or configurations to fit the new bootstrap version

[ruby-on-rails] Installing Bootstrap 3 on Rails App

Examples related to ruby-on-rails

Examples related to ruby

Examples related to twitter-bootstrap-3