How to change the color of Bootstrap links

Question

I am using twitter bootstrap and I have some code like this:

<%= link_to "Create", new_something_path %>

which renders the text in a light blue color, highlighting it as a link.

How would I reference that element to change it via css?

Solution 1

You can add a CSS class or id to a link_to by setting it in the html_options hash, which is the last parameter of the link_to helper.

For example, using Ruby 1.9 hash syntax (convert to :key => 'value' if using Ruby 1.8):

Just the CSS selector .new-something-class:

<%= link_to "Create", new_something_path, class: 'new-something-class' %>

or for a link with with the CSS selectors #new-something-id and .new-something-class:

<%= link_to "Create", new_something_path, class: 'new-something-class', id: 'new-something-id' %>

You could then reference this element in your .css file(s) as usual.

Solution 2

Give the link a class name

<%= link_to 'Create', new_something_path , :class => "newsomething"%>

add the following to your CSS.SCSS file

 a.newsomething{
      color: #000;
      &:hover {
         color: #000;
       }
     }

Comments

[Colin R]

This would add both the btn and the btn-primary stylings to the link, not enable him to reference it via CSS.

[dodgerogers747]

ok so there isn't an element like .navbar where you can access it, okies cool, you have to do it manually, thanks everyone! all upvoted, Andy

[Pavlo]

You are using LESS syntax here.