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
Last Updated :
07 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...