Semantic-UI Label Pointing Type Last Updated : 01 Mar, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </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= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </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 Comment More infoAdvertise with us Next Article Semantic-UI Label Pointing Type B blalverma92 Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Elements +1 More Similar Reads Semantic-UI Menu Pointing Type Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. The Menu is a component that displays a group of items that serve as navigation betwe 2 min read Semantic-UI Label Ribbon 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 con 4 min read Semantic-UI Label Types 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 con 2 min read Semantic-UI Dropdown Pointing Type Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI has a bunch of components for user interface design. One of them is “Drop 4 min read Semantic-UI Label Tag 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 con 2 min read Like