Skip to content
Related Articles

Related Articles

Semantic-UI | Comment

Improve Article
Save Article
  • Last Updated : 21 Jun, 2022
Improve Article
Save Article

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. It uses a class to add CSS to the elements.
A comment is like a forum where you can give you feedback.
Example1: This example creating the comment section using Semantic-ui. 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
            rel="stylesheet" />
 
    <script src=
    </script>
</head>
 
<body>
    <div style="margin-top: 20px" class="ui container">
        <div class="ui comments">
            <h3 class="ui dividing header">Comments</h3>
            <div class="comment">
                <a class="avatar">
                    <img src=
                </a>
                <div class="content">
                    <a class="author">Geeksforgeeks</a>
                    <div class="metadata">
                        <span class="date">Yesterday at 3:32PM</span>
                    </div>
                    <div class="text">
                        Good Work
                    </div>
                    <div class="actions">
                        <a class="reply">Reply</a>
                    </div>
                </div>
            </div>
            <div class="comment">
                <a class="avatar">
                    <img src=
                </a>
                <div class="content">
                    <a class="author">Rahul</a>
                    <div class="metadata">
                        <span class="date">Yesterday at 12:30AM</span>
                    </div>
                    <div class="text">
                         
 
<p>Nice Job, I wish I could do that.</p>
 
 
                    </div>
                    <div class="actions">
                        <a class="reply">Reply</a>
                    </div>
                </div>
                <div class="comments">
                    <div class="comment">
                        <a class="avatar">
                            <img src=
                        </a>
                        <div class="content">
                            <a class="author">Rishab</a>
                            <div class="metadata">
                                <span class="date">2 Minutes ago</span>
                            </div>
                            <div class="text">
                                Just need some practice.
                            </div>
                            <div class="actions">
                                <a class="reply">Reply</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="comment">
                <a class="avatar">
                    <img src=
                </a>
                <div class="content">
                    <a class="author">Nitin</a>
                    <div class="metadata">
                        <span class="date">3 days ago</span>
                    </div>
                    <div class="text">
                        Loved it!
                    </div>
                    <div class="actions">
                        <a class="reply">Reply</a>
                    </div>
                </div>
            </div>
            <form class="ui reply form">
                <div class="field">
                    <textarea spellcheck="false"></textarea>
                </div>
                <div class="ui blue labeled submit icon button">
                    <i class="icon edit"></i> Add Reply
                </div>
            </form>
        </div>
    </div>
</body>
 
</html>

Output: 
 

Example2: This example creates the comment section using Semantic-ui. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Comment Types</title>
    <link href=
    rel="stylesheet" />
 
        integrity=
        "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
        </script>
 
    <script src=
    </script>
     
    <style>
        body{
            margin:20px;
        }
    </style>
     
</head>
 
<body>
     
        <div class="ui container">
        <hr>
        <br>
        <div class="ui comments">
            <h2 class="ui dividing header">Comments</h2>
            <div class="comment">
                 
            <a class="avatar">
                <img src=
            </a>
            <div class="content">
                <a class="author">GeeksforGeeks</a>
                <div class="text">
                Welcome to GeeksforGeeks.
                </div>
                <div class="actions">
                <a class="reply">Reply</a>
                </div>
            </div>
            </div>
            <div class="comment">
                <a class="avatar">
                <img src=
                </a>
                <div class="content">
                <a class="author">Krishna</a>
                <div class="text">
                    Thank you so much.
                </div>
                <div class="actions">
                    <a class="reply">Reply</a>
                </div>
                </div>
            </div>
        </div>
          <form class="ui reply form">
                <div class="field">
                    <textarea spellcheck="false"></textarea>
                </div>
                <div class="ui blue labeled submit icon button">
                    <i class="icon edit"></i> Add Reply
                </div>
            </form>
    </div>
     
 
</body>
 
</html>

 Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!