How it works…
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, ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access