According to Cordell

Rails 4 and Twitter Bootstrap 3

By
on

If you are starting from scratch on a new rails project you may want to start with what is current, which at the moment is Rails 4 and Bootstrap 3. I would suggest setting up RVM or rbenv before continuing.

Install Rails 4:

gem install rails

Ensure you have it:

$ rails -v
Rails 4.0.0

Create your new project with rails:

rails new project_name
cd ./project_name

You will now install the [bootstrap-sass](https://github.com/thomas-mcdonald /bootstrap-sass) gem which I think is currently the easiest way to get bootstrap 3 into a rails project. Your other option here is to download bootstrap and place it within the vendor directory.

Open Gemfile and add the following:

gem 'bootstrap-sass', '~> 3.0.0.0.rc'

and

bundle install

Bootstrap 3 should now be installed in the bundle but we need to include the javascript and stylesheets.

Create a file at ./app/assets/stylesheets/custom.css.scss and add the following:

@import "bootstrap";
@import "bootstrap/theme";

In ./app/assets/javascript/application.js add the following line after the jquery requires:

//= require bootstrap

Finally, there is one more tweak for Bootstrap to work properly. In the default application layout you want to add the following line within the <head> tags:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

Enjoy your Bootstrap’d Rails!