How to use Bootstrap Error Message instead of Javascript alert?

Solution:

Built-in alert() functionality cannot be styled and looks differently on different browsers and different platforms.

When opting for an HTML solution you will always need a div that is set to hidden and only becomes visible during the alert. Divs by nature are not modal (meaning, they do not stop you from doing other things on the screen). Thus you will need some code to emulate modality. This happens by using a z-index, opacity and capturing events outside of the div.

Since you are just beginning to learn this stuff you are better off not trying to write your own modal solution but use one of the hundreds of freely available components, many are bootstrap specific. The comments in your question point to few of those. Google can help you with the rest.

The point that is confusing use is the use of div. What you need to understand/keep in mind is that the divs start off hidden and are only shown programmatically when needed and have associated code to force modality.