1

Within Bootstrap, there is a class we can use called is-invalid. I'm using a separate validation tool that adds the class input-validation-error onto my elements where the issue is invalid. I cannot change that name. Nor do I want to duplicate styling that is-invalid already provides.

Is there a way from SASS, that I can borrow the mixin or color schemes of is-invalid and apply them to my custom class called input-validation-error?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
klewis
  • 7,459
  • 15
  • 58
  • 102

1 Answers1

3

Sure, you can simply use @extend...

.input-validation-error {
   @extend .is-invalid;
}

Demo: https://www.codeply.com/go/IBJbBsznKP

Related: How to extend existing SASS bootstrap grid classes
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • You are the man @Zim. I totally forgot about extend. Thanks for the example too! – klewis Apr 03 '19 at 19:27
  • My apologies I ran into an issue...I realized that I'm not on an npm webpack project, but instead I am using Bootstrap 4 as a CDN for the given project. Is there anyway I can extend .is-invalid from a remote location? or is that not possible? – klewis Apr 03 '19 at 19:51
  • No, not possible since SASS must be compiled on the server first. – Carol Skelly Apr 03 '19 at 19:52
  • Understood. Thanks – klewis Apr 03 '19 at 19:52
  • Notice: you have to import the scss file not the css. In my structure @import "../lib/bootstrap/scss/bootstrap.scss";. First i included the css file and got an error "Incompatible units: 'rem' and 'em'." when compiling. – Diego Frehner Jun 26 '20 at 14:22