This is an example of alerts popping up in the top-right corner, with a high z-index so that they appear above all the other elements on the page.
There are four alerts that will show up in the top-right corner of this recipe's web page.
The first is a warning alert, the second is an info alert, the third is a success alert, and the fourth is a danger alert.
On all the alerts, the HTML attribute of data-dismiss="alert" is removed from the HTML.
We added a custom class of .top-right on the alert container. We also used the classes of .col-12 and .col-md-5 so that on the screen under the md breakpoint, the alert spans the full width of the viewport, minus the 50px padding (set in the .top-right class). Above the md breakpoint, ...
