O'Reilly logo

Mastering Bootstrap 4 - Second Edition by Jason Marah, Benjamin Jakobus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Bouncing alerts

MyPhoto has a special offer alert in a prominent position on the page. However, it may still not grab the attention of the user initially. We need to focus the attention of the user immediately on the alert and add some emphasis. We need to tell the user that this is something they should read.

Animate.css has a range of bounce classes that are great for grabbing the attention of a user. We have a selection of 11 bounce classes here: bounce, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, and bounceOutUp.

We'll go with the bounceIn class, which gives a throbber-like behavior. To get the bounceIn effect, add the animated and bounceIn classes to the special ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required