Alert Class

One of the ready-made css classes BootStrap offers for div and similar elements is the alert class.

Using the Alert class, we can easily apply ready-made views to elements such as divs, spans, etc., usually to give a message to the visitor.

Sample:

In the example above, alert class has been applied to a div tag. The codes are as follows:

The content inside the div element is up to you.

Two separate classes have been applied to the div tag, and the alert-danger selector has given a red-toned appearance. Other options are as follows:

alert-success selector:

alert-info selector:

alert-warning selector:

You can review the codes in the topic examples section and try it yourself.

If we apply the alert-link selector to a link in the section with the alert class applied, that link will acquire a color that matches the element it is in:

Close Button

If we want the element to which the Alert class is applied to be closed by the visitor;

• Implement the alert-dismissible class as well as the alert class.
• For the close button create a link or button inside the tag and apply the class="close" and data-dismiss="alert" parameters.

Thus, the user clicks that link or button to create a div etc. can hide the element.

If we apply the .fade and .in selectors as well, the fade effect will occur on shutdown.

It is beneficial for us to use the aria-label parameter in terms of accessibility.

EXERCISES