Using Twitter Bootstrap in my Rails app, missing markup

Question

I installed twitter-bootstrap-rails gem with less support by adding the following in my Gemfile:

  gem 'therubyracer'
  gem 'less-rails'
  gem 'twitter-bootstrap-rails'

After running a bundle install, I went ahead and ran the generator:

rails generate bootstrap:install static

My application.css in app/assets/stylesheets/ has the following in it:

 *= require_self
 *= require_tree .

If I view source, I do see the following there:

<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" />

So that's there. Then I started playing with the Grid system and added the markup show-grid and noticed there's no style for it. I proceeded to add the following in my bootstrap_and_override.css.less file:

@import "twitter/bootstrap/reset.less";
@import "twitter/bootstrap/variables.less";
@import "twitter/bootstrap/mixins.less";
@import "twitter/bootstrap/scaffolding.less";
@import "twitter/bootstrap/grid.less";
@import "twitter/bootstrap/layouts.less";
@import "twitter/bootstrap/type.less";
@import "twitter/bootstrap/forms.less";
@import "twitter/bootstrap/wells.less";
@import "twitter/bootstrap/component-animations.less";
@import "twitter/bootstrap/buttons.less";
@import "twitter/bootstrap/close.less";
@import "twitter/bootstrap/navs.less";
@import "twitter/bootstrap/navbar.less";
@import "twitter/bootstrap/labels-badges.less";
@import "twitter/bootstrap/hero-unit.less";
@import "twitter/bootstrap/utilities.less";
@import "twitter/bootstrap/responsive";

After adding these, I started the local Rails server up and still don't see the markup in the application. Must be doing something wrong here. Does application.css need to be renamed application.css.less? Do I need to recompile something? I'm guessing show-grid styling is on one of the imports below (probably grid.less), and I'm guessing that something I'm doing incorrectly is not importing those stylesheets.

Where's a good step to begin troubleshooting this?

Answer 1

The Bootstrap show-grid class comes from the docs.css that Bootstrap use on their own demo site.

I don't think it's really meant to be used by folk who download Bootstrap but I guess there's nothing stopping you using it.

The css is in this file:

http://twitter.github.com/bootstrap/assets/css/docs.css

And it's used here on Bootstrap:

http://twitter.github.com/bootstrap/scaffolding.html