Semantic-UI Message Negative / Error Variation
Semantic-UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website. Semantic-UI Message is used to show some important information. Negative / Error Variation is used to display the negative and error message. We use a negative class to display a negative message and an error class to display an error message. In this article, we will discuss Message Negative / Error Variation in Semantic-UI.
Semantic-UI Message Negative / Error Variation Classes:
- negative: This class is used to display the negative message.
- error: This class is used to display the error message.
Syntax:
<div class="ui Negative/Error-Variation-Classes message"> ..... </div>
Example 1: The following code demonstrates the Semantic-UI Message Negative / Error Variation to display a negative message.
HTML
<!DOCTYPE html><html><head> <title>Semantic-UI Message Negative / Error Variation</title> <link rel="stylesheet" href=</head><body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3> Semantic-UI Message Negative / Error Variation </h3> </div> <div class="ui negative message"> <div class="header"> Sorry, you can't apply for this job. </div> <p> This job has expired </p> </div></body></html> |
Output:
Semantic-UI Message Negative / Error Variation
Example 2: The following code demonstrates the Semantic-UI Message Negative / Error Variation to display an error message.
HTML
<!DOCTYPE html><html> <head> <title>Semantic-UI Message Negative / Error Variation</title> <link rel="stylesheet" href=</head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3> Semantic-UI Message Negative / Error Variation </h3> </div> <div class="ui error message"> <div class="header"> There are some errors that occurred. </div> <ul class="list"> <li> You must enter your first name </li> <li> You must enter your mobile number </li> <li> You must enter your email id </li> </ul> </div></body></html> |
Output:
Semantic-UI Message Negative / Error Variation
Reference: https://semantic-ui.com/collections/message.html#negative–error
Please Login to comment...