Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
A label can be really useful to make your website more user-friendly.
Example 1: This example create a simple label content.
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 >Label</ h2 >
< div class = "ui label" >
< i class = "users icon" ></ i > 100
</ div >
</ div >
</ body >
</ html >
|
Output:
You can use any icon for example mail or any icon, you can check icons on the semantic-UI site.
Example 2: This example create a label for your form element.
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 >Log In</ h2 >
< div class = "ui form" >
< div class = "four wide field" >
< input type = "text" placeholder = "Username" >
< div class = "ui pointing label" >
Enter Username
</ div >
</ div >
< div class = "four wide field" >
< input type = "password" placeholder = "Password" >
< div class = "ui pointing label" >
Enter Password
</ div >
</ div >
< div class = "field" >
< input class = "ui primary button"
type = "submit" value = "Log In" >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 3: This example create a Floating Label.
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 >Floating Label</ h2 >
< div class = "ui compact menu" >
< a class = "item" >
< i class = "icon users" ></ i > Request
< div class = "floating ui red label" >10</ div >
</ a >
< a class = "item" >
< i class = "icon mail" ></ i > Messages
< div class = "floating ui red label" >100</ div >
</ a >
< a class = "item" >
< i class = "icon globe" ></ i > Notification
< div class = "floating ui teal label" >22</ div >
</ a >
</ div >
</ div >
</ body >
</ html >
|
Output:
Last Updated :
20 May, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...