Semantic-UI Label Horizontal Type
Last Updated :
21 Mar, 2022
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. This framework allows us to use various of its styles and properties to make a website more user-friendly.
In this article, we will create a Label Horizontal Type using the Semantic UI framework. A Semantic UI label is used to create meaningful content classifications. In the Semantic UI label, 9 types of labels are offered. These are Label, Image, Pointing, Corner, Tag, Ribbon, Attached, Horizontal and Floating.
Semantic UI Label Horizontal Type is used to format the label content along-size it horizontally.
Semantic-UI Label Horizontal Type Class:
- horizontal: This class is used to make the label in horizontal format.
Syntax:
<a class="item">
<div class="ui horizontal label"> ... </div>
...
</a>
Example 1: The below example illustrates the Semantic UI Label Horizontal Type Icon using label and horizontal class.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "stylesheet" href =
< script src =
</ script >
< title >Semantic-UI Label Horizontal Type</ title >
</ head >
< body >
< div class = "ui container center aligned" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Label Horizontal Type</ h3 >
< a class = "item" >
< div class = "ui green horizontal label" >
Site
</ div >
GeeksforGeeks
</ a >
</ div >
</ body >
</ html >
|
Output:
output
Example 2: In this example, we will create some horizontal labels in form of the list items using Semantic-UI.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "stylesheet" href =
< script src =
</ script >
< title >Semantic-UI Label Horizontal Type</ title >
</ head >
< body >
< div class = "ui container center aligned" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Label Horizontal Type</ h3 >
< div class = "ui selection list" >
< a class = "item" >
< div class = "ui green horizontal label" >Site</ div >
GeeksforGeeks
</ a >
< a class = "item" >
< div class = "ui yellow horizontal label" >Topic</ div >
Semantic UI
</ a >
< a class = "item" >
< div class = "ui blue horizontal label" >Label</ div >
Horizontal
</ a >
</ div >
</ div >
</ body >
</ html >
|
Output:
output
Reference: https://semantic-ui.com/elements/label.html#horizontal
Share your thoughts in the comments
Please Login to comment...