Bootstrap: Button links with text state colors

[levithomason]

Curious about community need / interest in this feature. I often use btn-link buttons and want to be able to color the buttons per the text state colors provided by Bootstrap. I have found it intuitive to try class="btn-link text-danger" for a delete link button, to no avail.

I now accomplish this by adding the below to my Bootstrap override LESS file. I feel something like this should ship with Bootstrap. What do the maintainers and the community think?

.btn-link {
    &.text-success {
        .text-emphasis-variant(@state-success-text);
    }
    &.text-info {
        .text-emphasis-variant(@state-info-text);
    }
    &.text-warning {
        .text-emphasis-variant(@state-warning-text);
    }
    &.text-danger {
        .text-emphasis-variant(@state-danger-text);
    }
    &.text-muted {
        .text-emphasis-variant(@text-muted);
    }
}

[cvrebert]

As mentioned in the docs, just use a wrapper span:
<button class="btn btn-link"><span class="text-danger">Your text</span></button>

[levithomason]

Seems a little markup heavy. Though, I was ignorant of the docs on this. Thanks for the super speedy review.

[cvrebert]

There are a bunch of places where the text color and background color utility classes don't work due to CSS specificity. Adding overrides for them all would really bloat the CSS, and would still fail for some users' custom CSS. The span trick is simple and works almost everywhere.

[sergeymorkovkin]

With span trick it's showing hover underline with text-primary, no matter what color text is. Also, using text-xxxxxx doesn't change color on hover. I wouldn't say this is a complete solution.

[levithomason]

I noticed this as well. The above override works well.

[roberkules]

just had the same issue, updated example for bootstrap 4 / sass:

.btn-link {
  @each $name, $color in (success: $success, info: $info, warning: $warning, danger: $danger) {
    &.text-#{$name} {
      @include hover-focus {
        color: darken($color, 10%) !important;
      }
    }
  }
}