Semantic-UI Label Pointing Type
Semantic UI is a framework that is used to build a great user interface. It is an open-source framework that uses CSS and jQuery. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
A Semantic UI label is used to create meaningful content classifications. In this article, we will learn to use the Semantic-UI Label Pointing Type of the Semantic UI framework. The Semantic-UI Label Pointing Type is used to add a label element pointing to the next to it.
Semantic-UI Label Pointing Type Classes:
- pointing: This class is used to add labels pointing to the default position.
- pointing below: This class is used to add labels pointing to the below position.
- left pointing: This class is used to add labels pointing to the left position.
- right pointing: This class is used to add labels pointing to the right position.
Syntax:
<form class="ui fluid form">
<div class="field">
<input type="text" placeholder="First name">
<div class="ui pointing label">
...
</div>
</div>
...
</form>
Example 1: This example describes the uses of Semantic-UI Label Pointing Type.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Semantic-UI Label Pointing Type
</ title >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "ui container" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Label Pointing Type</ h3 >
< form class = "ui fluid form" >
< div class = "field" >
< div class = "ui pointing below label" >
Please Enter Your Username
</ div >
< input type = "text" placeholder = "Username" >
</ div >
< br >
< div class = "field" placeholder = "Password" >
< input type = "password" >
< div class = "ui pointing label" >
Please Enter Your Password
</ div >
</ div >
</ form >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example describes the uses of Semantic-UI Label Pointing Type with color and size variations.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Semantic-UI Label Pointing Type
</ title >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "ui container" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Label Pointing Type</ h3 >
< form class = "ui fluid form" >
< div class = "field" >
< div class = "ui pointing below green label" >
Please Enter Your Username
</ div >
< input type = "text" placeholder = "Username" >
</ div >
< br >
< div class = "field" placeholder = "Password" >
< input type = "password" >
< div class = "ui pointing blue big label" >
Please Enter Your Password
</ div >
</ div >
</ form >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/elements/label.html#pointing
Last Updated :
01 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...