Twitter bootstrap displays button with greyed text

Question

I'm using Twitter Bootstrap as a framework on my Ruby on Rails application.

I use link_to to generate links that are styled as buttons, with the following CSS classes: "btn btn-primary btn-mini".

For example:

<%= link_to 'New Event', url_for(:action => 'new', :controller => 'events') , :class => "btn btn-primary btn-mini" %>

generates the following html

<a href="/events/new" class="btn btn-primary btn-mini">New Event</a>

The button displays correctly, but the button text is displayed in grey instead of white. Functionally it works fine, it's not disabled or so. The text also turns white when the mouse hovers over the button.

I tested a few cases. What I concluded in is that whenever the generated (or hardcoded) link starts with a forward slash (/) the button text is greyed. Whenever it starts with a relative resource

I'm running Rails 3.2.2, and using the latest twitter-bootstrap-gem.

How can I fix that?

Answer 1

Did you run a scaffold generator? Scaffold.css will cause this. If you remove it you'll be good to go.

You can also run the generator with --skip-stylesheets to prevent them being created

Answer 2

Don't entirely delete your scaffold.css folder, just delete the contents and leave the folder there. If you generate scaffold at some other point again, especially if you're in beginning dev stages, the folder will probably come back and you will have the same problem. So if you just delete the contents, it's kind of the same thing and the system won't add another folder in the future.

Answer 3

Simply add :style to your button.

<%= link_to 'New Event', url_for(:action => 'new', :controller => 'events') , :class => "btn btn-primary btn-mini", :style=>'color:#FFFFFF;' %>

Answer 4

In case you already have a application running and you decide to install bootstrap AND don't have Scaffold.css anymore, you can just add this to your bootstrap.css at the parte where buttons properties are defined (mine: line 2726):

.btn:visited { 
color: #FFF
}