sredmond sredmond - 6 months ago 18
HTML Question

How can I add text emphasis to links in Bootstrap?

Bootstrap allows me to emphasize text in general through the use of the

text-*
class attribute on the
<p>
tag. However, when I nest a link inside, the link does not have the emphasis formatting applied (namely, color). Is there an attribute I could add to the anchor tag so that it will display the same emphasis as the
<p>
tag?

For example, the following code would have a green 'HW: Read this ' followed by a blue, underlined 'Link'

<p class="text-success"><strong>HW:</strong> Read this <a href="http://json.org/">Link</a></p>


Thank you in advance.

Answer

Inherit the color property for the anchor with this style:

.text-success a{
    color: inherit;
}

By default anchors do not inherit the color property of their parent.

JS Fiddle: http://jsfiddle.net/7ZFpr/1/

Comments