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!
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
Gary Ford
14,475 PointsOverwrite 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
Courses Plus Student 94,610 PointsHi 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
8,554 PointsNot 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
14,475 Pointssorry 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
8,554 Pointscan you paste your code? and is everything else in your stylesheet working?
Logan Schmidt
8,554 PointsThe 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
14,475 Pointsmy 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
8,554 Pointsmaybe try:
a {
color: #000 !important;
}
Gary Ford
14,475 PointsUnfortunately, that didn't work either. ugh.
Gary Ford
14,475 PointsThanks so much for all the answers. I've decided to not use Bootstrap and code from scratch.
johnathanmyers
19,994 PointsI 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;
}