Bootstrap 4 – Responsive Web Design

Using the Alerts component

The Alerts component in Bootstrap provides contextual messages for typical uses, such as validation and general information, that need to stand out more. Like our previous components, it comes in a few different variations depending on your needs. Let's start by looking at the basic code required to render the different alert options:

<div class="alert alert-success" role="alert"> 
  A success alert 
</div> 
<div class="alert alert-info" role="alert"> 
  An info alert 
</div> 
<div class="alert alert-warning" role="alert"> 
  A warning alert 
</div> 
<div class="alert alert-danger" role="alert"> 
  A danger alert 
</div> 

The classes used to create an alert can be added to any block element, but for demo purposes we'll implement them using ...