CODEWITHSUNDEEP
csstwitter-bootstrap
qbolec
qbolec

Reputation: 5134

How to unstyle anchor when using bootstrap

Bootstrap adds very nice default styles for anchors, but it makes it difficult to use <a> tag for something other than blue text. Say, I want the text to be black. One way to do that would be to add class="my_class" to the anchor tag, and then put a.my_class{color:black} rule.

But as I will soon realize bootstrap adds also style for :hover. So, I have to change that too. Also it changes styles for outline, text-decoration, :focus, etc.

Of course I could just read unminified version of bootstrap.css and try to understand what are all the cases I have to cover, to make sure it stays black. But I perceive that there must be some easier way - I was expecting something like adding class="link-unstyled" or something?

Upvotes: 39

Views: 98997

Answers (7)

Erich Buelow
Erich Buelow

Reputation: 124

You can update the Bootstrap variables in a custom SCSS file.

Variables for link color:

$link-color: blue; // color
$link-hover-color: darken(blue, 15%); // color on hover
$link-decoration: underline; // text decoration
$link-hover-decoration: underline; //  text decoration on hover

From the documentation: https://getbootstrap.com/docs/5.0/customize/sass

Upvotes: 0

dsghi
dsghi

Reputation: 823

Reset color .text-reset and Text Decoration .text-decoration-none are Bootstrap 4 options for achieving this.

Upvotes: 54

lsblsb
lsblsb

Reputation: 1352

I found a version for Bootstrap 3, just removed the visited property: Bootstrap "link-unstyled" Helper Class

.a-unstyled {
    &,
    &:link,
    &:visited,
    &:hover,
    &:active,
    &:active:hover {
      color: inherit;
      text-decoration: none;
    /*font-style: inherit;
      background-color: transparent;
      font-size: inherit;
      font-variant: inherit;
      font-weight: inherit;
      line-height: inherit;
      font-family: inherit;
      border-radius: inherit;
      border: inherit;
      outline: inherit;
      box-shadow: inherit;
      padding: inherit;
      vertical-align: inherit;*/
    }
}

This includes the inheritance suggestion of @Ohad Schneider's comment.

Upvotes: 1

Markus
Markus

Reputation: 5807

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>

Upvotes: 48

Chris Anderson
Chris Anderson

Reputation: 8515

Came across this and while Jeroen's answer is pretty comprehensive, it's also quite long.

If I want this label to have the normal label text color, I just need two new CSS rules.

a.unlink {
  color: inherit;
}
a.unlink:hover {
  color: inherit;
}

If you look at my snippet, you can see the difference.

a.unlink {
  color: inherit;
}
a.unlink:hover {
  color: inherit;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<span class="label label-primary"><a class="unlink" href="#">Good looking tag</a></span> <-- This looks good
<br />
<span class="label label-primary"><a href="#">Bad looking tag</a></span> <-- This looks bad

Upvotes: 8

Jeroen
Jeroen

Reputation: 63760

I'm late to the party, but would still like to offer an alternative answer to address some issues from the question directly, and offer my own solution FWIW.

Some general points

I was expecting something like adding class="link-unstyled" or something?

Me too. Apparently it isn't there.

Of course I could just read unminified version of bootstrap.css [...] But I perceive that there must be some easier way.

Don't be too afraid: the twitter-bootstrap source is fairly understandable. Have a look at the appropriate lines in scaffolding.less, which look like this:

// Links      

a { 
  color: @link-color; 
  text-decoration: none; 

  &:hover, 
  &:focus { 
    color: @link-hover-color; 
    text-decoration: underline; 
  } 

  &:focus { 
    .tab-focus(); 
  } 
}

So in fact, the Bootstrap source surprised me: as you mention there is at least also :visited, but Bootstrap ignores that. The answer to that is found in this SO question:

as Bootstrap was built for applications, it doesn't support [:visited]

Makes sense. Anyways, I guess we only have to override the styles Bootstrap sets, adding other pseudo selectors as we desire. But, as you say in your comment on the other answer:

how do I know as a developer what I have to "unstyle"?

There is in fact a short list of things you have to override, which MDN summarizes in the :hover article:

In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.

That's the answer to your question: you know from MDN (or if you must: from the W3 spec, which is of course 'more authorative') - or you know from looking at this Stack Overflow thread you've created :-).

If you wish, you can still set :active for your website though. Which brings me to...

My solution

This is in fact the solution you allude to in your question: use a specific class to style the correct pseudo-classes.

Sass version:

$unstyledAColor: #333;
$unstyledAColorHover: #000;
$unstyledAColorInverse: #969696;
$unstyledAColorInverseHover: #FFF;

.a-unstyled {
    color: $unstyledAColor;
    &:link { color: $unstyledAColor; }
    &:visited { color: $unstyledAColor; }
    &:hover { color: $unstyledAColorHover; }
    &:active { color: $unstyledAColor; }
}

.navbar-inverse .a-unstyled {
    color: $unstyledAColorInverse;

    &:link { color: $unstyledAColorInverse; }
    &:visited { color: $unstyledAColorInverse; }
    &:hover { color: $unstyledAColorInverseHover; }
    &:active { color: $unstyledAColorInverse; }
}

CSS version:

.a-unstyled { color: #333; }
.a-unstyled:link { color: #333; }
.a-unstyled:visited { color: #333; }
.a-unstyled:hover { color: #000; }
.a-unstyled:active { color: #333; }

.navbar-inverse .a-unstyled { color: #969696; }
.navbar-inverse .a-unstyled:link { color: #969696; }
.navbar-inverse .a-unstyled:visited { color: #969696; }
.navbar-inverse .a-unstyled:hover { color: #FFF; }
.navbar-inverse .a-unstyled:active { color: #969696; }

Upvotes: 6

JohanVdR
JohanVdR

Reputation: 2878

Here is a live example: http://jsfiddle.net/S9JXC/12/ You can style an individual element or a group of elements. In this case they override the styles defined by bootstrap.css which is loaded before these styles and take precedence.

Styles defined by bootstrap.css

a {
    color: #428BCA;
    text-decoration: none;
}

a:hover, a:focus {
    color: #2A6496;
    text-decoration: underline;
}

Custom styles

.style-1 {
    color: red;
}
.style-1:hover, 
.style:focus {
    color: darkred;
}
.style-2 a {
    color: #9F5F9F;
    text-decoration: underline;
}
.style-2 a:hover,
.style-2 a:focus {
    color: #871F78;
}

<a href="#">Link</a><br>
<a href="#" class="style-1">Link with a different style</a>

<div class="style-2">
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

Upvotes: 12

Related Questions