Book
Submodule 4.2: Displaying Content - Media - Alerting Users
Submodule 4.2: Displaying Content - Media - Alerting Users
Completion requirements
- Tables
- Cards
- Images
- Media Object
- Alerting Users
Alerting Users
In this short lesson, we will examine the use of badges as a way of alerting users.
We will continue to edit the index.html
file. In this file, we will add a badge HOT
next to the name of the dish 85% DARK CHOCOLATE in the first content row
. To do this, add the following code inside the <h2>
containing the name of the dish:
<span class="badge badge-danger">HOT</span>
Next, we will add a badge as a badge-pill
right next to the earlier tag in the web page. Add the following code to the <h2> tag
:
<span class="badge badge-pill badge-success">$0.99</span>
The above code will create a page displayed as:
Do commit the changes to the Git repository with the message "Alerting Users".