How can I change the speed of the fade for alert messages in Twitter Bootstrap?

Question

I'm using twitter bootstrap and the fade for the close on the alert box happens faster than I would like. Is there somewhere I can change the duration of the fade or perhaps even set it on a per alert basis?

Thanks

Pyrrhuloxia

Have you looked in bootstrap-transition.js? twitter.github.com/bootstrap/javascript.html#tooltips – Polish

Answer 1

Dan Herman,

If you're not using less and you feel like editing the bootstrap.css you may try and edit this one and not to mess around with the .js file.

Edit

 .fade {
   opacity: 0;
   -webkit-transition: opacity 0.25s linear;
      -moz-transition: opacity 0.25s linear;
       -ms-transition: opacity 0.25s linear;
        -o-transition: opacity 0.25s linear;
           transition: opacity 0.25s linear;
 }

and make it into...

 .fade {
   opacity: 0;
   -webkit-transition: opacity 1.25s linear;
      -moz-transition: opacity 1.25s linear;
       -ms-transition: opacity 1.25s linear;
        -o-transition: opacity 1.25s linear;
           transition: opacity 1.25s linear;
 }

1.25s is not the default value, that's is just an example and if you apply that, you'll really notice the effect and the difference.

Now, if you want to create another variant of the fade selector, lets say, "myFade", then I think you need to modify the bootstrap-alert.js and add your new class selector or "myFade" class selector.

I don't know yet about javascript. I just thought you need to modify the bootstrap-alert.js and insert your new class.

Prostate

.35 I find is the best value to use if you want to be able to click the tabs quickly. – Declamation

Answer 2

It actually uses .transition(opacity .15s linear); in component-animations.less (line 5).

If you look on line 64 of bootstrap-alert.js you can see where it's referencing the class. Change .15s to what you want it to be and you should be good to go.

Thermoluminescent

Thanks, this is the file I was looking for. _component-animations.scss in my case. – Skiagraph

Answer 3

For me on bootstrap 4, just adding these lines in my custom style.css was good enough.

.show {
    transition: opacity 100ms; // You can play with the 1
}

Walkon