Im trying to put the bootstrap source files in my rails project but I am not seeing an "assets" folder in my app folder. Are the Image, Javascript, and CSS folders in "public" the same thing? If not then where do I put the source files? I am using ruby version 1.9.2-p290, rails version 3.0.19, and bootstrap version 2.3.2. Not sure if that makes a difference or not.
Why don't you just use a bootstrap gem like bootstrap-sass instead?
Look at this project: twitter-bootstrap-rails
It is an easy way to set up bootstrap in your Ruby on Rails project.
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?
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.
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.
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.
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
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.
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
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.
Using this branch will hopefully solve the problem:
gem 'twitter-bootstrap-rails',
git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
branch: 'bootstrap3'
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.
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!
What is the right way of implementing the Foundation's off-canvas layouts in a Rails project?
I am using the zurb-foundation gem, and tried both version 3.x and 4 (with rails generators). The off-canvas js/css files do not seem to get included in my pages. Should I be including these manually?
Better late than never.
I just hade this issue and its due to the fact that the zurb-foundation gem is badly out of date.
Remove:
gem "zurb-foundation"
Run:
bundle clean -F
Add:
gem 'foundation-rails'
Run:
bundle install
And restart your server.
In Rails -
Where should I locate Gems? I downloaded bootstrap and it's working, as well as a sample Rails app, separately, but I want them to work together. There is a bootstrapped rails gem (http://rubygems.org/gems/bootstrapped-rails) which I downloaded, but I'm unsure as to where I should locate it. Under models?
And how do I make sure I am referring to it? I need to add something in controller as well?
Again, more an answer to the question in the title than to what was intended by the questioner but you can use
bundle show <gemname>
To locate the directory where a gem is installed.
As Dfr mentioned: https://github.com/seyhunak/twitter-bootstrap-rails
Twitter bootstrap isn't anything more than (mostly) a collection of css/js/image files.
Add this to your gemfile
gem "twitter-bootstrap-rails"
run
bundle install
run for simple css
rails generate bootstrap:install static
It should place relevant js and css files into your application.js and application.css files accordingly. (Read more about asset pipeline)
To get you started, in the gem's link under section - "Generating layouts and views", you can see rake tasks to generate sample layouts.
e.g.
rails g bootstrap:layout application fixed
You should now have a twitter-bootstraped application.html.erb file under views/layouts.
To answer the question in the title, you can locate your gems by running gem env in the console. That will give you the specific information about your "RubyGems Environment:" When you run gem install some_gem_name it will add this gem to your system.
However, what it sounds like your trying to do is add a gem to your app. If this is the case you add gems to a rails application's Gemfile.
So using your example, you'd locate your Gemfile and add the following:
gem "bootstrapped-rails", "~> 2.0.8.5"
Once that's done, you run bundle install in your terminal.
I find that a good resource for basic rails information can be found here: http://guides.rubyonrails.org/getting_started.html
The tutorial is short and it will give you a great starting point.
How do I use the twitter-bootstrap-rails gem in my Rails 3.2.1 app? What is the workflow?
After I do:
rails g bootstrap:layout [LAYOUT_NAME] [*fixed or fluid] [options]
what do I do next? Do I just copy and paste the generated code into my view? Do I do this for every view? If so, how is doing
rails g bootstrap:themed [RESOURCE_NAME] [LAYOUT] [options]
any different?
Do you guys even use the rails generators?
Thanks
I'm the author of twitter-bootstrap-rails gem. I'll give you a quick walktrough to how to install and use twitter-bootstrap-rails.
Ruby stack;
(Ruby 1.9.3, Rails 3.1 or Rails 3.2 is required. Use RVM to get started)
After bundling gem to Gemfile by;
gem 'twitter-bootstrap-rails'
bundle install
Run install generator
rails g bootstrap:install
(it will includes Twitter Bootstrap to your app's asset pipeline)
Run layout generator
rails g bootstrap:layout application fixed
(it will generates layout for you, by default application.html.erb and fixed layout will generates)
Run themed generator (optional);
rails g scaffold post title:string description:text
(this step uses Rails generators to create CRUD stuff for you)
rake db:migrate
(migrating to database)
rails g bootstrap:themed posts
(Twitter Bootstrap compatible styling for your 'posts' views and form)
Also there is detailed documentation to install, usage and generators, coffeescript etc.
https://github.com/seyhunak/twitter-bootstrap-rails.
There is a RailsCasts tutorial that is a great starting point:
http://railscasts.com/episodes/328-twitter-bootstrap-basics
Run:
rails new APPLICATION -m anyfile.rb
anyfile.rb
gem "therubyracer"
gem "less-rails"
gem "twitter-bootstrap-rails"
generate("scaffold", "Post title:string content:text")
rake("db:create")
rake("db:migrate")
generate("bootstrap:layout", "application fluid")
generate("bootstrap:install")
generate("bootstrap:themed", "posts")
git :init
git :add => "."
git :commit => "-m First commit!"