Bootstrap 5 underline default changed?

user_7947875 0
Viewed 8590

In Bootstrap 4 i understand it set the default text-decoration to be none.

But using Bootstrap 5 if i just add a raw anchor tag it is now showing both the blue writing and underline.

I was looking to only show the undelrine upon hovering. Is this something bootstrap 5 changed in the release? I cannot find any documentation stating it.

Currently i use:

    a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline;
    color: inherit
}

but this is also affecting any buttons as links e.g.

<a href="{% url 'answer-create' question.id %}" class="btn btn-outline-dark mr-2 py-0">Answer</a>
bootstrap-5 bootstrap-4 html
4 Answers

Yes, As of Bootstrap 5 alpha1 the migration docs state:

"Links are underlined by default (not just on hover), unless they’re part of specific components"

You could create a special class like this:

.text-underline-hover {
    text-decoration: none;
}

.text-underline-hover:hover {
    text-decoration: underline;
}

<a href="#" class="text-underline-hover">Link</a>

Demo

Or, if you want it to apply to all anchors except for those that contain a class= attribute use:

a:not([class]) {
    text-decoration: none;
}

a:not([class]):hover {
    text-decoration: underline;
}

This will not effect btn, only links without class will underline on hover.

user_1714560

All-in-one solution

This CSS code for Bootstrap 5 won't underline your <a ...> links (unless hovered over):

  • even if they have another class like mb-4 etc
  • unless they have the btn class, in which case they stay untouched.

Code to copy paste into your CSS file:

/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not([class*="btn"]) {
    text-decoration: none;
}
a:not([class*="btn"]):hover {
    text-decoration: underline;
}

Proof:

/* Simulate Bootstrap 5 CSS */
a { 
    text-decoration: underline;
}
a:hover { 
    text-decoration: underline;
}
a.btn {
   text-decoration: none;
   border: 1px solid #ccc;
}
a.btn:hover {
   text-decoration: none;
   border: 1px solid #ccc;
   background-color:  #ccc;
}

/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not([class*="btn"]) {
    text-decoration: none;
}
a:not([class*="btn"]):hover {
    text-decoration: underline;
}
<a href="foo.html">An a link without class</a><br/>
<br/>
<a href="foo.html" class="cool">An a link with class cool</a><br/>
<br/>
<a href="foo.html" class="btn">An a link with class btn</a>

user_4721090

Your <a> tag also has the btn class that's why you get this behaviour.

class="btn btn-outline-dark mr-2 py-0"

Because buttons in bootstrap also has btn class. That's why with your CSS.

a:hover {
    text-decoration: underline;
    color: inherit
}

All the buttons with class btn also becomes underlined.

Solution:

Just remove btn btn-outline-dark from <a> and use custom class to style it.

<a href="{% url 'answer-create' question.id %}" class="mylink mr-2 py-0">Answer</a>
user_69389690

As the default anchor is now underlined, defining custom CSS rules is tricky as these rules will interfere with components (for example navbars, dropdowns, ...).

The official solution i think will be using .text-decoration-none on all the anchors. It's a bit annoying but it's explicit and, we all hope, future-proof. :)

user_10613910
Related