Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Semantic-UI | Label

  • Last Updated : 20 May, 2020
Geek Week

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :