Bootstrap 4 Tutorial

BS4 Introduction

How to use Bootstrap

BS4 Layout

BS4 Grid System

BS4 Typography

BS4 Colors

BS4 Table

BS4 Images

BS4 Jumbotron

BS4 Alerts

BS4 Buttons

BS4 Button Group

BS4 Badges

BS4 Progress Bar

BS4 Pagination

BS4 Breadcrumb

BS4 Card

BS4 Collapse

BS4 Nav Tabs Pills

BS4 Navbar

BS4 Tooltip

BS4 Carousel

BS4 Scrollspy

BS4 Forms

BS4 Form Validation

BS4 Form Custom

Page Stats

Visitor: 176

Bootstrap 4 Alert

Bootstrap 4 alerts is use to provide text message of any length, as well as an optional dismiss button. Alerts are created with the .alert class, followed by one of the eight required contextual classes.

Success! Indicates a successful or positive action.
Info! Indicates a neutral informative change or action.
Warning! Indicates a warning that might need attention.
Danger! Indicates a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary! This alert box indicates a less important action.
Light! Light grey alert box.
Dark! Dark grey alert box.
<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Alert Links

Use the alert-link class to any links inside the alert box to create "matching colored links".

<div class="alert alert-success" role="alert">
    This is a success alert with <a href="#" class="alert-link">a hyperlink</a>.
</div>

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. 
  This example text is going to run a bit longer so that you can see 
  how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Closing Alerts

To close the alert message, add a .alert-dismissable class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).

x Success! Indicates a successful or positive action.
x Primary! Indicates an important action.
<div class="alert alert-success alert-dismissable">
  <a class="close" data-dismiss="alert">x</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Animated Alerts

The .fade and .in classes adds a fading effect when closing the alert message.

× Success! Indicates a successful or positive action.
<div class="alert alert-danger alert-dismissable fade show">
   <a class="close" data-dismiss="alert">×</a>
   <strong>Success!</strong> Indicates a successful or positive action.
</div>
Updated: 1-Apr-20