Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Semantic-UI | Comment

  • Last Updated : 16 Nov, 2021

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.
Example: 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: 
 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :