Question

I’m using gem 'twitter-bootstrap-rails, '2.1.4' for a project. Rails 3.2.6

I first noticed a problem when deploying to heroku, but I also have the problem on my local machine. It seems some of the twitter defaults are not being loaded. For example, the navbar is white instead of the default dark gray/black. The fonts are bigger than bootstrap’s defaults.

Here’s what the navbar looks like, even though I never changed bootstrap’s default navbar colors.

I have my assets set up this way:

An application controller method determines which layout to use which then loads either application.css or blog_admin.css because the admin layout is different from the regular site layout.

application.css
 /*
 *= require_self
 *= require_tree ./application
 */

blog_admin.css
 /*
 *= require_self
 *= require_tree ./blog_admin
 */

Each directory, application and blog_admin have a bootstrap_and_overrides.css.less.

What’s even stranger is on my laptop, the styling is correct in the dev environment. On my iMac, it’s not and has missing styling. When deployed to Heroku, it always has missing styling, even if deployed from my laptop which has the correct styling in the dev environment.

Any idea what could be going wrong? If it’s just not finding bootstrap’s default variables, how can I ensure that they’re loading?

This is also a tough one to debug, so any advice there would also be appreciated.

Answer 1

Both of those default styles were changed in Bootstrap 2.1.0.

The navbar component is now white by default, with an optional class to darken it.

The new class for a dark navbar is navbar-inverse.

New base font-size and line-height. 13px/18px is out, 14px/20px is in.

You can easily change these back by modifying the LESS variables or using the customizer.

I’m guessing you’re just linking to an older or modified version of Bootstrap on your laptop.