Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Comment Reply Form Content

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 15 Jun, 2022
Improve Article
Save Article

In this article, we are going to learn about comment replies from content. Semantic-UI is an open-source front-end development framework like bootstrap that is used to design a responsive website.

It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks.

There are four types of content in the comment element, and these contents are listed below:

  • Avatar content: The profile image that is present on the left side of the comment, and that small-size profile image is called an avatar.
  • Metadata content: Whenever an individual makes any comment on a website then there is an arbitrary amount of metadata is defined. A comment can contain extra information about the comment.
  • Actions: A comment can contain a list of some actions a user may perform related to the comment for example if a user wants to hide the comment then they can hide the comment if there was an option for that.
  • Reply form: A comment can contain a form to reply to a comment, and this may have arbitrary content.

In simple words, whenever you made a comment on your Instagram profile then beneath your comment there is an option of replying to them again. 

Syntax:

<div class="actions">
    <a class="reply">reply</a>
</div>

Approach:

  • Create an HTML file and import semantic-UI framework.
  • After that, you just have to include a comment with the reply form.
  • In the final step, you can apply some CSS properties to enhance your website interface.

Example1: The below example illustrates the Semantic-UI comment reply form content.

HTML




< !DOCTYPE html >
    <html>
 
        <head>
            <link
                href=
                rel="stylesheet" />
        </head>
 
        <body>
            <center>
                <h1 class="ui header green">
                    GeeksforGeeks
                </h1>
 
                <strong>
                    Semantic UI - Comment Reply Form Content
                </strong>
            </center>
 
 
            <div class="ui large comments">
                <h3 class="ui dividing header">
                    Comments
                </h3>
 
                <div class="comment">
                    <a class="avatar">
                        <!-- If you need any profile picture -->
                        <img src=
                    </a>
 
                    <div class="content">
                        <a class="author">Avantika</a>
                        <div class="metadata">
                            <span class="date">
                                Today at 5:42PM
                            </span>
                        </div>
 
                        <div class="text">
                            How artistic!
                        </div>
 
                        <div class="actions">
                            <a class="reply">Reply</a>
                        </div>
                    </div>
                </div>
            </div>
        </body>
 
    </html>


Output:

Example2: The below example illustrates the Semantic-UI comment reply form content.

HTML




<!DOCTYPE html>
<html>
<head>
    <link href=
        rel="stylesheet" />
</head>
<body>
    <center>
        <h1 class="ui header green">
            GeeksforGeeks
        </h1>
        <strong>
            Semantic UI - Comment Reply Form Content
        </strong>
    </center>
    <div class="ui large comments">
        <h3 class="ui dividing header">
            Comments
        </h3>
        <div class="ui comments">
            <div class="comment">
                <a class="avatar">
                    <img src=
                </a>
                <div class="content">
                    <a class="author">Kishor</a>
                    <div class="metadata">
                        <span class="date">Today at 6:42PM</span>
                    </div>
                    <div class="text">
                        cool!
                    </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">raja</a>
                    <div class="metadata">
                        <span class="date">Yesterday at 12:30AM</span>
                    </div>
                    <div class="text">
                         
<p>This page is awesome </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">Krishna</a>
                            <div class="metadata">
                                <span class="date">Just now</span>
                            </div>
                            <div class="text">
                                Thank you raja and kishor.
                            </div>
                            <div class="actions">
                                <a class="reply">Reply</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="comment">
                <form class="ui reply form">
                    <grammarly-extension data-grammarly-shadow-root="true"
                        style="position: absolute; top: 0px; left: 0px; pointer-events: none;"
                        class="cGcvT">
                    </grammarly-extension>
                    <grammarly-extension data-grammarly-shadow-root="true"
                        style="mix-blend-mode: darken; position: absolute;
                            top: 0px; left: 0px; pointer-events: none;"
                        class="cGcvT"></grammarly-extension>
                    <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>
    </div>
</body>
</html>


Output:

 

Reference: https://semantic-ui.com/views/comment.html#reply-form


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!