How to unstyle anchor when using bootstrap
Reset color .text-reset and Text Decoration .text-decoration-none are Bootstrap 4 options for achieving this.
Even later to the party but with a shorter solution for for normal text links (inside p etc.):
.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
color: inherit;
text-decoration: inherit;
}
My tests show that with :link all special styles on hover or after clicking it are removed.
Edit 22.11.2015: :hover is still needed for some use cases, for example in the following snippet. Updated the css above.
.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
color: inherit;
text-decoration: inherit;
}
.bg-menu:hover {
background-color: #0079C1;
color: #FFFFFF;
}
.clickable {
cursor: pointer;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row" style="width:400px;">
<ul class="list-unstyled col-md-4">
<li class="bg-menu clickable"><a href="#" class="link-unstyled">test1-1</a>
</li>
<li class="bg-menu clickable"><a href="#" class="link-unstyled">test1-2</a>
</li>
<li class="bg-menu clickable"><a href="#" class="link-unstyled">test1-3</a>
</li>
</ul>
<ul class="list-unstyled col-md-4">
<li class="bg-menu clickable"><a href="#" class="link-unstyled">test2-1</a>
</li>
<li class="bg-menu clickable"><a href="#" class="link-unstyled">test2-2</a>
</li>
<li class="bg-menu clickable"><a href="#" class="link-unstyled">test2-3</a>
</li>
</ul>
<ul class="list-unstyled col-md-4">
<li class="bg-menu clickable"><a href="#" class="link-unstyled">test3-1</a>
</li>
<li class="bg-menu clickable"><a href="#" class="link-unstyled">test3-2</a>
</li>
<li class="bg-menu clickable"><a href="#" class="link-unstyled">test3-3</a>
</li>
</ul>
</div>