If you want a small solution for generating the form markup, I've created a gem called bootstrap_forms, which eliminates the need for all the messy markup bootstrap requires.

https://github.com/sethvargo/bootstrap_forms

Yes Ryan is right. Anything before IE 9 is an older version of erm, any web browser?

For form, You can also use simple_form with bootstrap installation http://railscasts.com/episodes/234-simple-form

Any suggestions to avoid class="span3"? It seems like it would be a maintenance headache.

Docs:
"Use the same .span* classes from the grid system for input sizes."

There's also https://github.com/stouset/twitter_bootstrap_form_for for forms

Twitter Bootstrap is also available as plain CSS. Infact, im quite sure the default download package is using CSS?

I highly recommend bootstrap-sass.

I don't know if Ryan covers it in the pro version, but you can customize your own theme using http://stylebootstrap.info

Ryan

This is right on time. Do you plan on doing a comparison with Foundation from the guys at Zurb? Foundation

I am having a tough time deciding which solution to go with mostly because of the less vs sass issue.

Thanks again.

Hi... when I want to use custom variables as defined here: http://twitter.github.com/bootstrap/less.html

1. Do I need to include "less-rails" in the :assets block of the Gemfile? Why (not)?

2. How can I debug whether my variables are set properly? I am currently experimenting with variables in app/assets/stylesheets/bootstrap_and_overrides.css.less

@orange: #FF2400
@linkColor: #ff0000
@baseColor: @orange
@navbarBackground: @orange

hmm... i also get a:

/bootstrap_and_overrides.css - 304 Not Modified

in the logs
however, none of these seems to have an effect.
What are your experiences in tracking the problem? (tracers, logs are difficult to get in Less/assets pipeline as far I know)

It's just uncanny how every time I'm looking at something Ryan does a railscast on that very topic. This has happened at least 5x in the recent months...

Looking forward to seeing if my thoughts about Bootstrap match up with Ryan's!

Setting @gridColumnWidth or @navbarHeight variables (dont know if any else), seems not working. Anyone has similar problems? Have any solutions for this?

And second question, how correctly i should use mixins? If I create products.css.less file and i want to use .box-shadow() property, 'less' returns errors that this function is not defined. That works if i put:

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";

in product.css.less file but then i have this code defined twice.

This has been my latest UI interest - and go figure there's suddenly a railscast for it. Ooooooo Weeeeeee what up with that?

Does Less run on server-side or client-side using this plugin?

I think that the Less pre-compiler compiles it to CSS on the server and then ships it over the wire to the client?

I honestly wouldn't advise anyone use Twitter Bootstrap because the JS files in it have hardly any semi-colons.

// js/bootstrap-dropdown.js

function clearMenus() {
  $(toggle).parent().removeClass('open')
}

There's no plausible reason that the end of that method shouldn't have a semi-colon.

Put it on heroku for some odd reason:
http://quiet-lightning-3439.herokuapp.com/products

Hi all, I am using bootstrap in one of my project. And do have concerns to it, Its god that Rayan has started an episode related to it.

Can any one look at http://stackoverflow.com/questions/9427534/rails-3-1-asset-pipeline-and-large-project and answer to it.

So that it can be a guideline for people using the SASS,Compass,Bootstrap all together on a large projects.

It will be a great favor for me.

Do you think is a good idea to directly embed the Bootstrap classes in your HTML? See this blog post for a better(?) approach

Something is wrong, I am running the rails g bootstrap:themed but I don't get the nice action buttons in the list view and when I click on an item, the delete action button is not red. Any ideas? :/

Looking at the source, the action buttons are just = link_to "Show", oximetry_path(oximetry), etc in link view. My bootstrap version is 2.0.3.

Is there a way to use Twitter Bootstrap without JavaScript runtime? Because I am developing on a windows machine without a js runtime, so I always do rails new app --skip-sprocket, is there a way to only turn off the js part of the asset pipeline but still use less and sass?

it may have to do with the version of bootstrap i am running, but the padding modification Ryan suggested, while looking beautiful at wide screens, leaves an icky space on top on narrower media sizes. I used the following instead, which worked with my version:

  // Landscape phones and down
  @media (max-width: 980px) { padding-top: 0px;}

  // Portrait tablet to landscape and desktop
  @media (min-width: 980px) { padding-top: 60px;}

At the moment, by the way, I am preferring the following gem, which provides scss flavored bootstrap, but open to see where the community is coming down. I confess enjoying working in a single preprocessor for all my css.

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

After this Railscast, I decided to try to implementing Bootstrap into a project that has gone halfway without a designer (i.e. the devt did hackish work outside his scope to help beef up the design).

Bootstrap is really good.

I used Less with the Crunch compiler to generate the CSS files instead of all the gem plugins. Spent 2-3 hours restructuring the layout, tweak some color schemes using Crunch and output. Everything worked out in a day =)

Thanks Ryan and Twitter.

Please have a look on my project, I've fork the seyhunak project to use directly the official source of bootstrap.

So each time twitter bootstrap is updated you can get it directly in your rails project!

https://github.com/keysen/twitter-bootstrap-rails

I'm having problems getting the gem to work with a rails 3.2.2:

undefined method `ends_with?' for #<Pathname:0x00000105898040> (NoMethodError)

The Asciicast has an error on 'adding a navbar'

The class data-target is shown as ".collapse" rather than ".nav-collapse"

How can I add my own icon sprite? I see we're setting the variable here:
@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');

However, where in my project would I put my "icon-sprite.png" file. There's no twitter/bootstrap folder anywhere.

Thank you.

After this and the Pro episode I switched over to sass-rails and everything is generally good, except that this: rails g bootstrap:themed products -f

No longer works. You can do it all manually, but it would be nice to use the generator. Anyone have any suggestions?

is there any gem to use it with rails 3.0 ? rails pre-asset-pipeline ? I don't want to upgrade to rails 3.1 and looking for gem rather than to do it manually , any ideas ?

Hi, I am using Ruby 1.9.3 and Rails 3.2.1 on Windows 64-bit machine. After following Ryan's step of adding gem 'twitter-bootstrap-rails' to my gemfile and running bundle, I get an error shown below. Any ideas on how to correct this please ?

Installing libv8 (3.3.10.4) with native extensions
Gem::Installer::ExtensionBuildError: ERROR: Failed to build gem native extension.

    >c:/Ruby193/bin/ruby.exe extconf.rb

*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of
necessary libraries and/or headers. Check the mkmf.log file for more
details. You may need configuration options.

I've used this tutorial before (2 weeks ago) and produced the same store application as Ryan. However, when I attempt to follow this tutorial again (on a new machine, running Ubuntu 11.10, same as before) I come up with this error http://pastie.org/3688534 after running the command $ rails g bootstrap:install and then refreshing the browser. Also note, the override.css file already contains the added padding to the top of the body - it's like it knew I was going to change it. If I comment out the @iconSpritePath and @iconWhiteSpritePath I can get localhost:3000/products to work but...

When I get to the point where I'm supposed to use the command $ rails g bootstrap:themed products -f it won't run correctly. I get this response on the command line http://pastie.org/3688555

I'm following the tutorial exactly. What could be causing this to happen?

I can't seem to figure this out at this moment in time. I created a new application from scratch, added a view, copied a template for the application.html.erb to contain a navbar. When you make your window smaller than 800px so the menu merges into a pulldown, you are unable to open the navbar. I uploaded the application if someone can look at it.

https://github.com/koldrid/testapp

The edge version of https://github.com/seyhunak/twitter-bootstrap-rails now as support for simple_form and I18n right out of the box.

I followed the example exactly at www.videos.org.in. However, styling works only with firefox and nothing happens in Chrome and IE. Assets are pre-compiled and are under public folder. Can some one help. Is there any config variable that I need to set?

Gemfile

source 'https://rubygems.org'

gem 'rails', '3.2.3'
gem 'sqlite3'

group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer', :platform => :ruby
gem 'twitter-bootstrap-rails'
gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

Is it better to include bootstrap using the gem or by manually copying the css/js files yourself?

Hi everyone.

I did this exaple and works great.

I just have one question.

In the next code, ¿how I can change the label for the button?

<%= link_to t('.edit', :default => t("helpers.links.edit")),
                            liquidacion, :class => 'btn btn-mini' %>

Regards.

Hi everyone.

Does anybody know how to update assets in existed app to use new bootstrap features?

I am having problem installing the twitter-bootstrap-rails gem. I searched around online and coulnd't find a solution. Here is the error message:

Gem::Installer::ExtensionBuildError: ERROR: Failed to build gem native extension.

    /Users/lionel_lei/.rvm/rubies/ruby-1.9.3-p194/bin/ruby extconf.rb 

checking for main() in -lobjc... yes
creating Makefile

make
compiling rr.cpp
make: clang++: No such file or directory
make: *** [rr.o] Error 1

Gem files will remain installed in /Users/lionel_lei/.rvm/gems/ruby-1.9.3-p194/gems/therubyracer-0.10.2 for inspection.
Results logged to /Users/lionel_lei/.rvm/gems/ruby-1.9.3-p194/gems/therubyracer-0.10.2/ext/v8/gem_make.out
An error occured while installing therubyracer (0.10.2), and Bundler cannot continue.
Make sure that gem install therubyracer -v '0.10.2' succeeds before bundling.

I am on OSX Lion and have xcode 4.5 installed.

Anyone here have any suggestions? Appreciate it!

Have anyone ever tried twitter-bootstrap-rails with select2-rails ?. It seems that the select2-rails is not working with the twitter bootstrap.

check out this one, https://github.com/thomas-mcdonald/bootstrap-sass

this gem is using SASS instead of LESS.

Error after installing bootstrap, can someone help ps? I'm using Rails 3.2.9, therubyracer already installed:

LoadError in Products#index

Showing C:/.../store/app/views/layouts/application.html.erb where line #5 raised:

cannot load such file -- less
(in C:/.../store/app/assets/stylesheets/bootstrap_and_overrides.css.less)
Extracted source (around line #5):

4: Store
5: <%= stylesheet_link_tag "application", :media => "all" %>
6: <%= javascript_include_tag "application" %>
7: <%= csrf_meta_tags %>

Hi, i am new with ruby on rails.
I have this problem:

LoadError in Products#index

Showing /Users/bogdy/store/app/views/layouts/application.html.erb where line #5 raised:

cannot load such file -- less
(in /Users/bogdy/store/app/assets/stylesheets/bootstrap_and_overrides.css.less)
Extracted source (around line #5):

This make all like in the video. Help please!!!

Problem solved. :)) Thank's

If you are searching for a bootstrap theme that is both beautiful and Rails compatible, check out {rails}strap which I developed.
It includes many goodies and aims to be a business-oriented, clean and responsive design. Besides documentation it includes support, a plain HTML version and a example Application which shows you how to setup the layout.
Save some development time and make your Rails application stand out.

I'm using Rails 4.0.0.rc1 and ruby 1.9.3p392.

It seems this episode won't work for me.
I'm having errors:

LoadError in Products#index

Showing /home/askar/work/rails_studio/store/app/views/layouts/application.html.erb where line #5 raised:

cannot load such file -- less
(in /home/askar/work/rails_studio/store/app/assets/stylesheets/bootstrap_and_overrides.css.less)
Extracted source (around line #5):

2
3
4 Store
5 <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
6 <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
7 <%= csrf_meta_tags %>
8

Rails.root: /home/askar/work/rails_studio/store

Application Trace | Framework Trace | Full Trace
app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_html_erb__3286420188203285275_35132680'

Can anybody point me for which environment does this episode work for? Is it written somewhere?

rake assets:clean and rake:assets:precompile to override the bootstrap_and_overrrides.css.less

I would like to download this source code and from my local machine come up with the same app. How do succeed. Please help

Hi

I'm trying to follow the instructions of the video. I executed the commands as required:

rails new store
rails g scaffold product name price:decimal --skip-stylesheets
rake db:migrate
rails g bootstrap:install
rails g bootstrap:themed products -f

of course I also put the twitter-bootstrap-rails gem into the gemfile

but when I run localhost:3000/products I get this (from the terminal where I run the server)

Started GET "/products" for 127.0.0.1 at 2013-06-29 16:06:39 +0800
Processing by ProductsController#index as HTML
Product Load (0.1ms) SELECT "products".* FROM "products"
Rendered products/index.html.erb within layouts/application (18.3ms)
WARN: tilt autoloading 'less' in a non thread-safe way; explicit require 'less' suggested.
Completed 500 Internal Server Error in 69ms

ActionView::Template::Error (cannot load such file -- less
(in /Users/ansonzeall/Desktop/lab/Rails/bootstrapTest/store/app/assets/stylesheets/bootstrap_and_overrides.css.less)):
2:
3:
4: Store
5: <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
6: <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
7: <%= csrf_meta_tags %>
8:
app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_html_erb__2649677383696800529_70257843367120'

says cannot load the less file

I ended up re-doing this in Rails 4, Bootstrap 3, and Sass. Check out the repo and README here: https://github.com/ivanoats/store-rails4-boot3-sass

I followed the tutorial and put all the required gems in the Gemfile as people suggested. I've been experimenting for hours now and after doing rails generate bootstrap:install - I get no change in fonts or formatting and it stays that way no matter what I do..
I'm using Rails 3.2.6 and Ruby 1.9.3

Learn How to Integrate Twitter Bootstrap 4 with Rails 5 by developing a movies database Rails 5 app.

this bootstraps need to be updated with all current version of Rails 5 ...