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

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.

Leave a Comment