Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Gary Ford
Gary Ford
14,475 Points
Posted by Gary Ford
Gary Ford
14,475 Points

Overwrite anchor link colors in Bootstrap

I'm trying to overwrite the "a" tag styles in Bootstrap. I've placed my own CSS file after the Bootstrap CSS file in the head of my document. I'm trying to change the link color by changing the color attribute in my CSS stylesheet, but it is now overwriting Bootstrap's color attribute. Any suggestions. My CSS is:

a { color: #000; }

6 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Gary,

Do you know how to use your browsers dev tools? You could inspect the link that you're trying to overwrite and see what selector bootstrap used.

Are you sure that the selector used was only a? bootstrap styles some links with a longer selector depending on the context the link is used in. If you can figure out what selector was used then simply matching that selector in your own stylesheet should allow you to overwrite it.

Could you post a little bit of the surrounding html around the link you're trying to change the color of?

Logan Schmidt
Logan Schmidt
8,554 Points
Logan Schmidt
Logan Schmidt
8,554 Points

Not sure what the question is? You said you are looking to overwrite it and then you said it does overwrite it, which is whawt you are trying to do. Can you clarify?

Gary Ford
Gary Ford
14,475 Points
Gary Ford
Gary Ford
14,475 Points

sorry for the typo. typing to fast. "now" should have been "not". I'm trying to overwrite the color attribute in Bootstrap for the "a" tag. My stylesheet CSS is not overwriting the color attribute.

Logan Schmidt
Logan Schmidt
8,554 Points
Logan Schmidt
Logan Schmidt
8,554 Points

can you paste your code? and is everything else in your stylesheet working?

Logan Schmidt
Logan Schmidt
8,554 Points
Logan Schmidt
Logan Schmidt
8,554 Points

The code where you link it. and the CSS with some of the code above or below. Maybe there is a Bracket missing and it isn't closed somewhere above the css a { color: #000;}

Gary Ford
Gary Ford
14,475 Points
Gary Ford
Gary Ford
14,475 Points

my code is exactly as I typed it above. All of my other styles are working correctly. I also double checked that my opening and closing brackets are all placed correctly and they are. I've checked similar situations on Stackoverflow and I'm supposedly doing everything correctly. This has me stumped.

Logan Schmidt
Logan Schmidt
8,554 Points
Logan Schmidt
Logan Schmidt
8,554 Points

maybe try:

a {
color: #000 !important;
}
Gary Ford
Gary Ford
14,475 Points
Gary Ford
Gary Ford
14,475 Points

Unfortunately, that didn't work either. ugh.

Gary Ford
Gary Ford
14,475 Points
Gary Ford
Gary Ford
14,475 Points

Thanks so much for all the answers. I've decided to not use Bootstrap and code from scratch.

johnathanmyers
johnathanmyers
19,994 Points
johnathanmyers
johnathanmyers
19,994 Points

I had the same problem. This worked for me.

ul.nav li a, ul.nav li a:visited {
    color: #fff !important;
}

ul.nav li a:hover, ul.nav li a:active {
    color: #fff !important;
}

ul.nav li.active a {
    color: #fff !important;
}