Css – Twitter bootstrap displays button with greyed text

cssruby-on-railstwitter-bootstrap

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?

Best Answer

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

Related Solutions

Css – How to make Twitter Bootstrap menu dropdown on hover rather than click

To get the menu to automatically drop on hover then this can achieved using basic CSS. You need to work out the selector to the hidden menu option and then set it to display as block when the appropriate li tag is hovered over. Taking the example from the twitter bootstrap page, the selector would be as follows:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

However, if you are using Bootstrap's responsive features, you will not want this functionality on a collapsed navbar (on smaller screens). To avoid this, wrap the code above in a media query:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

To hide the arrow (caret) this is done in different ways depending on whether you are using Twitter Bootstrap version 2 and lower or version 3:

Bootstrap 3

To remove the caret in version 3 you just need to remove the HTML <b class="caret"></b> from the .dropdown-toggle anchor element:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 & lower

To remove the caret in version 2 you need a little more insight into CSS and I suggest looking at how the :after pseudo element works in more detail. To get you started on your way to understanding, to target and remove the arrows in the twitter bootstrap example, you would use the following CSS selector and code:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

It will work in your favour if you look further into how these work and not just use the answers that I have given you.

Thanks to @CocaAkat for pointing out that we were missing the ">" child combinator to prevent sub menus being shown on the parent hover

Html – How to get centered content using Twitter Bootstrap

This is for Text Centering (which is what the question was about)

For other types of content, see Flavien's answer.

Update: Bootstrap 2.3.0+ Answer

The original answer was for an early version of bootstrap. As of bootstrap 2.3.0, you can simply give the div the class .text-center.

Original Answer (pre 2.3.0)

You need to define one of the two classes, row or span12 with a text-align: center. See http://jsfiddle.net/xKSUH/ or http://jsfiddle.net/xKSUH/1/

Best Answer

Related Solutions

Css – How to make Twitter Bootstrap menu dropdown on hover rather than click

Html – How to get centered content using Twitter Bootstrap

This is for Text Centering (which is what the question was about)

Related Topic