I'm a CSS/bootstrap learner so forgive me if this is a nonsense question....
I have a button on screen with classes "btn btn-outline-primary" applied.

Upon some event occurring in my component(Angular2) I apply my "button-invisible" class, which sets display to "none" but this doesn't happen. The button remains visible. When I check in dev tools I see that the class is applied(and I can change other style properties such as font-style etc...) but the "display: none;" is not enabled, it is struck through.

Can someone advise on why my class would be applied but certain aspects/properties overridden? The only way I can make this class function as I expect is by adding the !important rule.

Cheers

.btn from bootstrap \_buttons.scss

```
.btn {
  display: inline-block;
  font-weight: $btn-font-weight;
  line-height: $btn-line-height;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: $input-btn-border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
  @include transition($btn-transition);

  // Share hover and focus styles
  @include hover-focus {
    text-decoration: none;
  }
  &:focus,
  &.focus {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    cursor: $cursor-disabled;
    opacity: .65;
    @include box-shadow(none);
  }

  &:active,
  &.active {
    background-image: none;
    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
  }
}

```

my class that I am applying conditionally using ngClass...

```
.add-button-invisible {
    display: none !important;
}

```

Markup where applying class:

```
  <div class="row">
    <button [ngClass]="addingNew === true ? 'add-button-invisible' : 'add-button-visible'" class="btn btn-outline-primary" (click)="addNew()">+Add {{entityType}}</button>
  </div>

```