Set Colors of Links Within Bootstrap Alerts

Bootstrap alerts are a great, simple way to display information to users in a way that they can easily understand. But, one problem I was always running into was that links within the alerts were not colored appropriately (especially if I had customized the color of links on the specific website I was working on). So, I put together this chunk of CSS and placed it at the end of my stylesheet. Bingo! Now the links appear as they should.

.alert a, .alert-success a, .alert-info a, .alert-danger a, .alert-warning a {

Here’s how they’ll appear:

If, for some reason, the inherit value isn’t working for you, try this instead:

.alert-success a { color:#3c763d; text-decoration:underline; }
.alert-info a { color:#31708f; text-decoration:underline; }
.alert-warning a { color:#8a6d3b; text-decoration:underline; }
.alert-danger a { color:#a94442; text-decoration:underline; }

That’ll do the same thing. If it still doesn’t work, you might need to adjust the order of your stylesheets, and/or add !important to the end of these statements.

Of course, you’ll need to include the Bootstrap CSS first. Otherwise, this won’t do you much good.



This post was first published on October 21st, 2016 and last updated on November 27th, 2016 by Robert James Reese in the following categories: Bootstrap and CSS. Before using any of the code or other content in this post, you must read and agree to our terms of use.