Search code examples
cssangulartwitter-bootstrapangular-animations

How to overrule !important css rule from bootstrap

I'm trying to set a css style display: none; with angular animations to an element that already has a bootstrap class .d-block, which sets display as .d-block { display: block!important;}. How can I overrule the .d-block class ?

  trigger('fade', [
    state('hidden', style({
      opacity: 0,
      display: 'none'
    })),
    state('show', style({
      opacity: 1,
      display: 'block'
    })),
    transition('hidden => show', [
      animate('1s')
    ]),
    transition('show => hidden', [
      animate('1s')
    ])
Solution

  • I have not found a way to add higher specificity within the angular animations css rule, so for the time being I removed .d-block and added display: block in my css file.

    This way the normal css rule is overruled by the angular animations rule.