Bootstrap is incredible! Did you realize that? We created an alert with just three lines of code!

Well, another reason to think about that is to create dismissible alerts. Just add the highlighted line to the alert component and you will get the expected result:

<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>
  You have made a new Tweet.
</div>

This will create a close button that will dismiss the component using the data-dismiss="alert" attribute. Refresh the web page and you will see the alert like this:

Now, it's time for us to create our recipe for the alert. We have two tasks: add a title to .alert and use the links inside it.

First, create a heading element inside the alert:

<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>
  <h3>Tweet alert</h3>
  You have made a new Tweet.
</div>

Then, adjust the CSS for the heading inside the alert:

.alert h3 {
  margin: 0  0 1rem;
  font-size: 1.4em;
}

The final result of adding the title must be like what is shown in this screenshot:

For the second task, we have to add some links inside the component. Bootstrap can give us a little shortcut for this using the .alert-link class in the link. The class will give the correctly matching color for the link in response to the kind of the alert shown.

Therefore, the HTML code is simple:

<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>
  <h3>Tweet alert</h3>
  You have made a new Tweet.
  <a href="#" class="alert-link">Click here to review your tweets.</a>
</div>

To finish our first alert usage, let's just add one last fancy thing in the CSS, refresh the browser after that, and check the final result, as shown in the next screenshot:

.alert {
  border-left-width: 0.5rem;
}