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 => 'bootstrap-rails',
                              :github => 'anjlab/bootstrap-rails'

Then it says to do:

gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'

Do they do the same thing, or do you have to do them both?

hawk · Accepted Answer · 2025-02-16 13:22:13Z

272

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.

Update: According to many comments asking why we need 2 files min and non-min. Answer: you absolutely don't need both files. But it is good to have both files just for reference. In case you need to see the source for debugging for example. Otherwise, just include a single source file, which should be compressed and minified by sprockets. But be aware that it might not be minified in the best way as the original file.

edited Feb 16 at 13:22

answered Aug 22, 2013 at 4:06

hawk

5,4082 gold badges25 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Amy.js Over a year ago

I agree. I also found that directly inserting the files runs into less issues in precompiling assets (e.g., for pushing to Heroku).

jrhorn424 Over a year ago

Is there any advantage to including the minified files in vendor/assets/{stylesheets|javascripts}? Sprockets should minify the files that are included in app/assets/{stylesheets|javascripts}.

wwli Over a year ago

How to include image and fonts files?

user691369 Over a year ago

@wwli - See my answer below. It explains how to add the Glyphicons and fonts.

JohnMerlino Over a year ago

why are you copying both bootstrap and bootstrap.min?

|

givanse · Accepted Answer · 2018-01-11 01:22:54Z

63

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:

<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet">
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet">

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
> Rails.application.config.assets.paths

In the output you'll see that app/assets takes precedence, thus loading it first.

edited Jan 11, 2018 at 1:22

answered Dec 18, 2013 at 15:04

givanse

15k9 gold badges55 silver badges77 bronze badges

3 Comments

Kickingbull Over a year ago

Doesn't the order of the require statements in the application.css file control the order in which files are loaded rather than the order of the directories in the path list? The order of the paths typcially controls which version of a file gest loaded if it is found in multiple directories included in the path list. If not, how does the order of the require statements come into play?

Kourindou Hime Over a year ago

Please don't copy minified versions, otherwise you'll get double include later (seems like 'require_tree .' works that way?). I was unable to open any dropdowns after installed bootsy gem just because of this double-include.

Paco Abato Over a year ago

@Kourindou Hime's comment seems to worth attention. I couldn't open dropdowns until I removed .min files.

score 35 · Accepted Answer · 2014-01-08 19:28:41Z

35

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.

edited Jan 8, 2014 at 19:28

answered Nov 9, 2013 at 21:16

user691369

2 Comments

Steve Over a year ago

Can't seem to get this to work. It keeps searching localhost:3000/fonts/glyphicons-halflings-regular.svg as an example in Chrome console, and the glyphicons aren't coming up (as a 404).

ChrisJ Over a year ago

I had no end of trouble with the fonts - worked fine in development but not in production. Ended up just putting them in public/fonts

Bruno · Accepted Answer · 2014-02-19 16:09:56Z

22

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', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 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

edited Feb 19, 2014 at 16:09

Bruno

6,50917 gold badges72 silver badges106 bronze badges

answered Jan 2, 2014 at 3:07

Eneko Alonso

19.9k10 gold badges67 silver badges85 bronze badges

1 Comment

Brett Over a year ago

Thanks. A key point from the github readme for newbies; "If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it..."

Nick Ginanto · Accepted Answer · 2013-08-22 04:29:45Z

11

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.

answered Aug 22, 2013 at 4:29

Nick Ginanto

32.4k49 gold badges143 silver badges254 bronze badges

1 Comment

Cihat Gündüz Over a year ago

This gem is deprecated (as they point out themselves). Use the official SASS port instead: github.com/twbs/bootstrap-sass (Also see this answer: stackoverflow.com/a/20875719/3451975)

Bruno · Accepted Answer · 2014-01-16 22:46:29Z

5

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', '>= 3.2' # sass-rails needs to be higher than 3.2 gem 'bootstrap-sass', '~> 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

answered Jan 16, 2014 at 22:46

Bruno

6,50917 gold badges72 silver badges106 bronze badges

Comments

vinhboy · Accepted Answer · 2015-12-14 16:37:37Z

3

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 << 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.

answered Dec 14, 2015 at 16:37

vinhboy

9,0128 gold badges37 silver badges46 bronze badges

Comments

Tom Lord · Accepted Answer · 2016-09-23 10:05:37Z

3

Using this branch will hopefully solve the problem:

gem 'twitter-bootstrap-rails',
  git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
  branch: 'bootstrap3'

edited Sep 23, 2016 at 10:05

Tom Lord

28.4k5 gold badges54 silver badges86 bronze badges

answered Jul 18, 2014 at 10:19

chanakya devraj

1589 bronze badges

Comments

tbraun89 · Accepted Answer · 2013-08-22 04:00:01Z

1

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.

edited Aug 22, 2013 at 4:00

answered Aug 22, 2013 at 3:50

tbraun89

2,2343 gold badges26 silver badges47 bronze badges

5 Comments

megashigger Over a year ago

Thanks for the response. So 'gem anjlab' in my Gemfile is all I have to do @tbraun89?

tbraun89 Over a year ago

The readme is on the github page. The current gem is gem "anjlab-bootstrap-rails", "~> 3.0.0.1".

tbraun89 Over a year ago

In the readme they do this: gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'

megashigger Over a year ago

Thanks! I added something in the question. Could you clarify the part after 'edit'?

tbraun89 Over a year ago

The first loads the files directly from github so when you do an bundle update you will have the newest version, the secound loads the gem from rubygems which is version 3.0.0.1 at the moment. (2 days old)

mr_nobody · Accepted Answer · 2018-07-23 12:38:45Z

0

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!

answered Jul 23, 2018 at 12:38

mr_nobody

3662 silver badges4 bronze badges

Collectives™ on Stack Overflow

Installing Bootstrap 3 on Rails App

10 Answers 10

12 Comments

3 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

12 Comments

3 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related