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>
By default, web browsers have certain CSS styles that they apply to specific HTML elements. If you don't overwrite these defaults with your site's own style sheets, then the defaults apply. For hyperlinks, the default display style is that any linked text is blue and underlined.
The form elements in Bootstrap 4 have defaulted to the browser-provided view. However, in Bootstrap 5, the form elements have a custom design that enables them to have a consistent look and feel in all browsers. The new form controls are based on completely semantic, standard form controls.
If you are using Bootstrap 4 or older version of Bootstrap framework, you may need to customize your support level when migrating to Bootstrap 5. Internet Explorer 10 and 11 has been officially dropped on the new version.
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.
All-in-one solution
This CSS code for Bootstrap 5 won't underline your <a ...>
links (unless hovered over):
mb-4
etcbtn
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With