Just to confirm that it is working: I am using the bootstrap-sass gem in a project right now with Bootstrap 2.0 and Formtastic 2.0 It works beautifully :-)

Bootstrap is a really effective, saved a lot of time in my teams development cycles :)

Just a quick note on less/sass/haml contra less/css/erb

Due to some issues getting team members to wrap their head around sass and haml we're using the following gems:

gem 'less', '2.0.9'
gem 'less-rails', '2.1.6'
gem 'less-rails-bootstrap', '2.0.6'

instead of

gem 'sass-rails'

Works great as well together with simple form.

Many Thanks Ryan. Please keep up the good work. May be you want to consider adding datatable jQuery plugin to further improve the user experience when working with Rails/Bootstrap? Here is the link:

http://datatables.net/blog/Twitter_Bootstrap

If not no worries though. I have already watched both the Bootstrap episodes twice and they are a hugh help for someone getting started with Bootstrap in the Rails environment.

I am having a hell of a time trying to change out the gutter width and column width using the sass overrides. Here is my code:

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

// Set the correct sprite paths
@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');

@fluidGridColumnWidth: 4.78723404225%;
@fluidGridGutterWidth: 2.6595744675%;

Has anyone else had success with this?

I didn't really understand why I shouldn't just download the .zip package and add everything myself (to the css and js directories and application.css/js). Why is that such a bad thing?

thanks ryan, fwiw, here's decent tutorial on how to get bootstrap-sass, formtastic and tabulous working together: http://rubysource.com/too-good-to-be-true-twitter-bootstrap-meets-formtastic-and-tabulous/

Is someone using this gem with will_paginate? I've tried some initializers (will_paginate.rb) but the problem remains. The only way I found so far is this

http://d.hatena.ne.jp/CortYuming/20120131/p1,

but maybe somebody else solve it

thanks ryan!

i had to import the selective components this way to get it working.

@import "twitter/bootstrap/reset.less";

thanks ryan for this cast. awesome as usual!

I implemented bootstrap-sass gem on an existing app and i'm running into an issue i have not been able to solve yet:

$(document).ready() does not seems to work.
in the application.js
i require:
jquery
jquery-ujs
bootstrap
my js files.

Someone got an idea on what I did wrong.

Thanks a lot!

client_side_validations gem is not working with simple_form and bootstrap 2.
Does anyone know any alternative to client_side_validations ?

Anyone else getting javascript errors with the Sass variation, i.e.

"$("a[rel=popover]").popover is not a function
[Break On This Error]

$("a[rel=popover]").popover();"

Looks like for some reason the bootstrap js files aren't getting served up.

Does anyone know how to put the flash messages back in Rails 3.2.1??

<%= debug flash %> is empty.

I'm having trouble getting the navbar working. I'm using bootstrap-sass, haml and simple_form. What could be wrong?

Here is a screenshot of what is happening

It's like some of the CSS is not applied.

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.

Great screencast. Thanks!

A quick note: the close box on the alerts is not working (using Rails 3.2.2).

There's a small typo in the ASCII-cast; the anchor link for the close X is not ... closed with :-) But that didn't fix things.

Some have said this is because you need JQ 1.7, so I updated Gemfile to gem 'jquery-rails', '~> 2.0.1' and while the new jQuery is loading, the problem still exists.

Not sure if anyone else will have this problem, but I first added twitter-bootstrap-rails, then tried out boostrap-sass, then tried to go back and there is some kind of gnarly dependency error that chokes on 'therubyracer'. After a lot of Googling, it looks to be unresolved and I'm seeing show-stopper suggestions like "switch your development platform" :/

Anyway, it could very well be my environment, but be warned if you want to just "test out" bootstrap-sass, you might have a hard time getting back.

In any case, switching back to bootstrap-sass was no problem (once you delete bootstrap.js.coffee, per @kikouli). I was very torn on which way to go and this made my mind up for me, so maybe it worked out better in the end!

I had a problem with twitter-boot-strap and jcrop

The fix was to add the following to the css file

img {
max-width: none;

}

.preview{
display:block;
overflow:hidden;
}

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

If you use bootstrap-sass gem, does it have the same generators and what not as the twitter-bootstrap-rails gem?

I am using bootstrap-sass.
But, after I assigned bootstrap variables to mine, I couldn't see the changes.

$iconSpritePath: image_path('glyphicons-halflings.png');
$iconWhiteSpritePath: image_path('glyphicons-halflings-white.png');

$navbarBackground: #555;
$navbarBackgroundHighlight: #888;
$navbarText: #eee;
$navbarLinkColor: #eee;

$linkColor: #c52f22;
$linkColorHover: #980603;

@import "bootstrap";

body { padding-top: 60px; }

@import "bootstrap-responsive";

I'm having trouble getting jquery UI datepicker working along with bootstrap. Has anyone else faced this?

Re jquery UI datepicker and bootstrap (complicated by the best_in_place and simpleform gems), what worked for me was to not use the jquery ui rails gem, create a custom minimal jqueryUI package using the smoothness theme, then sub in from the css from http://addyosmani.github.com/jquery-ui-bootstrap.

Result: jquery UI datepicker works great, matches bootstrap 2.0.3.

If you are not using either best_in_place or simpleform and therefore don't need Jquery UI, https://github.com/eternicode/bootstrap-datepicker is a better match to Bootstrap.

Using the source code for this episode: store-after-less, I'm getting a Less::ParseError that 'reset.less' wasn't found. I've tried googling this issue and have not found a solution yet. I don't know if this is an issue with the less gem or with the twitter-bootstrap-rails gem.

FYI, I was able to have the same styling on the f.button when omitting 'btw' from :class, since 'btn' is one of the default classes the Twitter Bootstrap-powered version of SimpleForm has (defined in config/initializers/simple_form.rb):

<%= f.submit nil, :class => 'btn-primary' %>

Can leave out 'btn' from :class because its specified here:

# Default class for buttons
config.button_class = 'btn'

I'm newbie and follow the steps in this tutorial but validations not working (I can see the * for required fields but don't display any message). Using rails 3.2.3. Any idea?

this is the Gemfile:

source 'https://rubygems.org'

gem 'rails', '3.2.3'

Bundle edge Rails instead:

gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'sqlite3'

gem 'validates_existence', '~> 0.7.1'
gem 'simple_form'

Gems used only for assets and not required

in production environments by default.

group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platform => :ruby

gem 'uglifier', '>= 1.0.3'
gem 'therubyracer', :platform => :ruby
gem 'twitter-bootstrap-rails'
end

gem 'jquery-rails'

To use ActiveModel has_secure_password

gem 'bcrypt-ruby', '~> 3.0.0'

To use Jbuilder templates for JSON

gem 'jbuilder'

Use unicorn as the app server

gem 'unicorn'

Deploy with Capistrano

gem 'capistrano'

To use debugger

gem 'ruby-debug19', :require => 'ruby-debug'

Gems included by the bundle:
* actionmailer (3.2.3)
* actionpack (3.2.3)
* activemodel (3.2.3)
* activerecord (3.2.3)
* activeresource (3.2.3)
* activesupport (3.2.3)
* arel (3.0.2)
* builder (3.0.0)
* bundler (1.1.3)
* commonjs (0.2.6)
* erubis (2.7.0)
* execjs (1.3.1)
* hike (1.2.1)
* i18n (0.6.0)
* journey (1.0.3)
* jquery-rails (2.0.2)
* json (1.7.0)
* less (2.2.1)
* less-rails (2.2.2)
* libv8 (3.3.10.4)
* mail (2.4.4)
* mime-types (1.18)
* multi_json (1.3.4)
* polyglot (0.3.3)
* rack (1.4.1)
* rack-cache (1.2)
* rack-ssl (1.3.2)
* rack-test (0.6.1)
* rails (3.2.3)
* railties (3.2.3)
* rake (0.9.2.2)
* rdoc (3.12)
* sass (3.1.16)
* sass-rails (3.2.5)
* simple_form (2.0.1)
* sprockets (2.1.3)
* sqlite3 (1.3.6)
* therubyracer (0.10.1)
* thor (0.14.6)
* tilt (1.3.3)
* treetop (1.4.10)
* twitter-bootstrap-rails (2.0.6)
* tzinfo (0.3.33)
* uglifier (1.2.4)

How do I adjust the width of the fields in Twitter bootstrap after scaffolding? Would be awesome if someone would be able to help me, thanks!

I'm the only one getting issue with using custom mixin methods on heroku??

ActionView::Template::Error (.border-radius is undefined

I had imported these files

@import "twitter/bootstrap/variables";
@import "twitter/bootstrap/mixins";
@import "twitter/bootstrap/navs";

If you are having trouble getting some of your style changes to apply make sure you remembered generate the scaffold without stylesheets in the previous episode.

Bootstrap is a game changer for sure. Any chance we could get a quick update on how to use it along with tools like http://bootswatch.com/ or https://wrapbootstrap.com/ to introduce some variation into our designs?

@navbarBackgroundHighlight: none; fails

I'm not up on my .less so trying to figure this one out - any insight into this would be great , just trying to eliminiate highlight state or better yet direct it at an image source

Great episode. For those of you who want access to the additional twitter bootstrap alert message types in addition to success and error try the following code:

Change

<div class="alert alert-<%= name == :notice ? "success" : "error" %>"> 

to

<div class="alert alert-<%=(name == :notice && 'success' or name == :warning && 'warning' or name == :info && 'info' or 'error')%>">

I've been using Bootstrap to build an e-commerce site, and have run into a font override issue that I cannot track down. Using Typekit fonts, I can easily override all the headings (h1-h6) by adding something like:

h1 {font-family: "proxima-nova",sans-serif;
font-style: normal;
font-weight: 300;}

at the bottom of the bootstrap_and_overrides.css.less file. This generates the proper css in the final .css file that is served from the production server. These overrides are near, but not at, the bottom of the served .css file even though they are at the bottom of the bootstrap_and_overrides.css.less file. While overriding the headings works, I cannot override the body font. Using:

body {font-family: "proxima-nova",sans-serif;
font-style: normal;
font-weight: 300;}

generates the proper css near the bottom of the served .css file. Unfortunately, something else is adding a further body font-family override after thebootstrap_and_overrides.css.less override. There are 3 body font definitions in the served css; default Helvetica, followed by the "proximal-nova" assignment, which is then subsequently overridden by a Ventana assignment.

Any ideas where the Ventana assignment is coming from when using the twitter-bootstrap-rails gem? I've got the active admin gem bundled, but it appears to be doing styling on only active admin specific elements.

Just wondering if anyone has tried to use this in Rails 4.

I followed the last episode as well as this one, but I cannot lighten up the header by overriding the @navbar* variables as described. I am able to override @linkColor, but I'm not able to override the other variables. Everything worked fine up to that step, starting from the beginning of the last episode. Any suggestions?

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.

Has anyone had any luck formatting simple_form with twitter bootstrap?

I'm unable to find a solution to getting the remember me checkbox and label to align correctly. I see online that its a bug but I don't see any type of solution.

Thanks! I have been stucked on how to modify the default bootstrap variable for a long time. You saved a lot of my time.

If anyone is looking to use Bootstrap datepicker with best_in_place, I've forked best_in_place and turned the datepicker call into an event. Bootstrap support comes built in.

If the pull request is accepted it will be a part of best_in_place.

https://github.com/straydogstudio/best_in_place

Learn How to Style Forms and Navigation in Twitter Bootstrap 4 with Rails 5 by developing a movies database Rails 5 app part 2.