CODEWITHSUNDEEP
csstwitter-bootstrap
Panagiotis
Panagiotis

Reputation: 421

Change the font color of one element in bootstrap navbar

I want to change the font color of a link in a bootstrap navbar when certain conditions apply. However, it seems that the default font color for navbar links is used regardless if I apply a new CSS rule.

I have set up a bootply to illustrate my approach:

example

I am using bootstrap 2.3.2. Is it possible to change the font color of just one element in a bootstrap navbar?

Upvotes: 2

Views: 3961

Answers (3)

Ishaan Narula
Ishaan Narula

Reputation: 133

For one or more links to have different colors than the rest of the page:

There are two methods for doing this:

1.)Placing font tags between the ` and the tag. This method will work on all browsers except MSIE 3.

2.)Using a style setting in the tag. This method works on MSIE3 and newer browsers.

The first technique would look like this:

<a href="#"><font color="FF00CC">HOME</font></a>

The second technique would look like this:

<a href="#" style="color: rgb(0,255,0)">HOME</a>

Upvotes: 2

Ishaan Narula
Ishaan Narula

Reputation: 133

To define colors for all links on the page:

The general color of text links is specified in the <body> tag, like in the example below:

<body link="#C0C0C0" vlink="#808080" alink="#FF0000">

link - standard link - to a page the visitor hasn't been to yet. (standard color is blue - #0000FF).

vlink - visited link - to a page the visitor has been to before. (standard color is purple - #800080).

alink - active link - the color of the link when the mouse is on it. (standard color is red - #FF0000).

Upvotes: 0

himanshu
himanshu

Reputation: 1797

jsfiddle 

<div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Title</a>
        <ul class="nav">
          <li class="active"><a class="red" href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div>
    </div>
.red
{
    color:#ff0000 !important;
}

Upvotes: 1

Related Questions