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 <div> tags. Here are the key points you need to know:

Once you've set up the code for those alerts, they should look like this in the browser:

That was a basic example of using Alerts. There are some additional things you can do to extend this component such as adding a dismiss button.

Adding a dismiss button to alerts

If you want to make your alert bar dismissible, you can add a button to do this. To include the link, update the code for your bar, as follows:

<div class="alert alert-success" role="alert"> 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
    <span aria-hidden="true">&times;</span> 
  </button> 
  A success alert 
</div> 

The previous Alert bar code doesn't change, but you do need to add a button before the alert message:

• The <button> requires a class named .close to appear
• You'll also need the data-dismiss attribute to be included with a value of alert
• The × code will be rendered as an X in the browser

Once you've added the new code, your alert bar should look like this:

Now your alert bar has a dismissible X button that can be triggered to close when you implement the functionality of the component in your app or website. That completes the Alert component in Bootstrap 4. In the next section, I'll teach you about the best new component in version 4, which is Cards.