YouTip LogoYouTip

Bootstrap4 Alerts

# Bootstrap4 Alerts Bootstrap 4 makes it easy to create alerts. !(#) Alerts can be created using the `.alert` class, followed by one of the contextual classes `.alert-success`, `.alert-info`, `.alert-warning`, `.alert-danger`, `.alert-primary`, `.alert-secondary`, `.alert-light`, or `.alert-dark`: ## Example
Success! This is a success alertβ€”check it out!
[Try it Β»](#) * * * ## Alert with Links Add the `alert-link` class to any links inside the alert to create matching colored links: ## Example
Success! You should read this message.
[Try it Β»](#) * * * ## Dismissing Alerts Add the `.alert-dismissible` class to the alert's div, and then add the `class="close"` and `data-dismiss="alert"` classes to the close button's link to enable the dismiss functionality. ## Example
Success! This is a success alertβ€”check it out!
[Try it Β»](#) **Note:** × (Γ—) is the HTML entity for the multiplication sign, used here to represent the close action, not the letter "x". * * * ## Alert Animation The `.fade` and `.show` classes are used to add a fading effect when closing an alert: ## Example
[Try it Β»](#)
← Bootstrap4 ProgressbarsBootstrap4 Colors β†’