CODEWITHSUNDEEP
twitter-bootstraphyperlink
kekko12
kekko12

Reputation: 576

How to have a link look of non-<a> element?

Is there a way to assign the Bootstrap link style to a non <a> element?

I mean something like this:

<span class="link">Some text</span>

Upvotes: 21

Views: 21210

Answers (3)

Riaan Walters
Riaan Walters

Reputation: 2676

The correct answer, with bootstrap 4+ is to add these 2 classes on your a element

text-reset : Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.

text-decoration-none : Remove a text decoration with a .text-decoration-none class.

For more information see the official documentation : https://getbootstrap.com/docs/4.2/utilities/text/

Upvotes: -1

Cichy
Cichy

Reputation: 5292

No. Non exists CSS class with link styles. If you open source code of Bootstrap you can find definition link styles for a tag.

bootstrap/scss/_reboot.scss

//
// Links
//

a {
   color: $link-color;
   text-decoration: $link-decoration;
   background-color: transparent; // Remove the gray background on active links in IE 10.
   -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.

   @include hover {
      color: $link-hover-color;
      text-decoration: $link-hover-decoration;
   }
}

Upvotes: 3

Rachel S
Rachel S

Reputation: 3920

You can use the classes btn btn-link. These are Bootstrap link styles that usually are found on anchor tags or button tags but if you use it on any other text it will use those styles on your text. It may not yield the exact same results so your CSS may need to be tweaked.

Upvotes: 24

Related Questions