Semantic-UI Label Floating Type

Last Updated : 27 Feb, 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. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

In this article, we will learn to use the Label Floating Type of 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.

The Floating type label is used to add the small detail at the top corner of the label. The floating label is positioned inside the container relative to the container.

Semantic-UI Label Floating Type Class:

floating: This class is used to make the Floating Type Label.

Syntax:

<div class="ui compact menu">
    <a class="item">
        text...
        <div class="floating ui label"> 
            text...
        </div>
    </a>
</div>

Note: To make the text float to the container we have to make a container, we are taking the menu, it is a predefined class to add items in it.

Example 1: In this example, we will add the Floating Type Label of the Semantic UI framework.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Semantic-UI Label Floating Type</title> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
    <title>GeeksforGeeks</title> 
</head> 
  
<body> 
    <br /> 
    <div class="ui compact menu"> 
        <a class="item"> 
            GeeksforGeeks 
            <div class="floating ui label">site</div> 
        </a> 
    </div> 
</body> 
  
</html>

To use the Label Floating Type we have to make an item and container first to make the position of the float label relative.

Output:

Semantic-UI Label Floating Type

Example 2: In this example, we will add the Floating Type Label of the Semantic UI framework with colours.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Semantic-UI Label Floating Type</title> 
    <link rel="stylesheet"
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
    <title>GeeksforGeeks</title> 
</head> 
  
<body> 
    <br /> 
    <div class="ui compact menu"> 
        <a class="item"> 
            GeeksforGeeks 
            <div class="floating ui green label"> 
              site 
            </div> 
        </a> 
        <a class="item"> 
            Geek 
            <div class="floating ui red label"> 
              Username 
            </div> 
        </a> 
    </div> 
</body> 
  
</html>

Colours also have their class names such that to use the green colour we have to include the colour name i.e. green, inside the class along with class floating.

Output: