YouTip

Here's the translated content in clean HTML format:

Bootstrap allows you to define styles for success messages, warnings, and error notifications in your website or app. In this tutorial, you'll learn how to achieve this.

Using the CSS class "alert" (located between lines 2123 to 2175 in bootstrap.css, version 2.0.1), you can create a simple alert message. You can optionally add a close icon to it.

When you click the close icon in the alert box, it will disappear. To implement this interactive feature, you must include two JavaScript files: jquery.js and alert.js. You can add them just before the closing body tag.

Example

body { padding: 50px; }

Note that the code between lines 18 to 21 is required. These are only for demonstration purposes.

Output

View Online

View the above example in a different browser window.

With two additional CSS classes "alert-block" and "alert-heading", you can extend the simple alert message demonstrated earlier. This gives you better control over the text to display, and you can add a heading before the alert text.

When you click the close icon in the alert box, it will disappear. To implement this interactive feature, you must include two JavaScript files: jquery.js and alert.js. You can add them just before the closing body tag.

Example

body { padding: 50px; }

Output

View Online

View the above example in a different browser window.

Bootstrap allows you to create appropriate alerts when errors or dangers, successes, and information occur. For errors, you need the CSS class "alert-error". For success, you need the "alert-success" class. For information, you need the "alert-info" class. Of course, as explained in previous examples, you'll need the JS files jquery.js and alert.js.

Example

body { padding: 50px; }

Output

View Online

View the above example in a different browser window.

Click here to download all HTML, CSS, JS, and image files used in this tutorial.