Html – ‘Text-decoration: none’ not working in Bootstrap


On hover, my text links have underlines. This is the default in Bootstrap.

I want to keep this, unless the link is within a certain div.

The code I have tried (and several variations) doesn't work.


        <div class="wall-entry span5">
            <a href="">
            <img src="" />
            <div class="wall-address">
                <p>Burgundy Street</p>
                <p>New Orleans, LA</p>


.wall-entry     {
                background-color: @black;
                position: relative;

            img {
                filter:alpha(opacity=40); /* For IE8 and earlier */

            div {
                position: absolute;
                left: 10px;
                bottom: 10px;
                p   {
                    line-height: 18px;
                    margin: 0;
                    font-family: Neuzit Heavy;
                    font-size: 18px;
                    color: white;
                    text-decoration: none;

div.wall-entry:hover img    {
                            filter:alpha(opacity=100); /* For IE8 and earlier */                    

a div.wall-entry {text-decoration: none;}

A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.

Best Solution

put the font-family in quotes for fonts that involve multiple words, first of all:

font-family: "Neuzit Heavy", sans-serif;

then beneath a put .wall-entry a:hover { text-decoration: none; }

You have the order switched around. The item you're targeting should be to the right. For example,

.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"