Using and customizing alerts

Now that we know how to use icons, let's turn to a different topic, namely, alert boxes. Alert boxes are typically used to highlight an important event, or to emphasize an important message. As such, the purpose behind alerts is to provide a content area that immediately stands out, and therefore cannot be easily overseen by the user. For example, imagine that MyPhoto only supports browsers above certain versions. In such a case, a user who visits the site with an unsupported browser version should be notified that their browser is not supported. After all, the website may not function or display correctly when viewed with unsupported software. Bootstrap provides us with the alert class, which makes it very easy for us to implement this hypothetical scenario (the JavaScript for browser detection will be presented in Chapter 5, Speeding Up Development Using jQuery Plugins).

Bootstrap's alert comes with four contexts: Success, Warning, Info, and Danger. Each context...