Alerts in our web app
In the last chapter, we did almost everything related to page components. Now we will create some components that interact with the user. To start this, we will introduce alerts, which are very common components of every web app.
In order to learn about alerts, we should create some of them. The pattern for creation is pretty simple; just remember to import Bootstrap JavaScript as we have been doing all throughout the book.
The main class needed to create alerts is .alert. You can just follow this class with some other, regarding the type of alert, such as .alert-success for a success message. There are other classes available as well, such as .alert-info and .alert-danger. Just replace the suffix of .alert with the one that you want to use.
It's time to create our first alert! Keeping the same code of the web app from the last chapter, right before div#main, you must have your ol.breadcrumb. Replace ol.breadcrumb with your .alert, like what is shown in this screenshot:
The HTML code for creating this alert is really simple:
<div class="alert alert-success" role="alert"> You have made a new Tweet. </div>
As mentioned before, just create an element with the .alert class in combination with the state of the alert, .alert-success in this case.
Tip
Why do we use the role attribute?
In the preceding example, we made use of the role="alert" attribute in our .alert component. The role attribute was incorporated into HTML 5, coming from the ARIA 1.0 specification. The reason for using that is to keep the semantics for different items, for example, in this case, where we used a common <div> to describe a more semantic element that is an alert.
Dismissing alerts
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">×</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:
Customizing alerts
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">×</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">×</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;
}
