→ Asmath
→ Beutifull Comment Section Bootstrap - 5

Beutifull Comment Section Bootstrap - 5

The comment section for your website

This bootstrap css example is contributed by Asmath, on 26-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Comment

Author Asmath

4.1k

v.5.3

Fork Fullscreen

<div class="container">
    <div class="comment-section">
        
        <div class="mb-4">
            <div class="d-flex gap-3">
                <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="user-avatar">
                <div class="flex-grow-1">
                    <textarea class="form-control comment-input" rows="3" placeholder="Write a comment..."></textarea>
                    <div class="mt-3 text-end">
                        <button class="btn btn-comment text-white">Post Comment</button>
                    </div>
                </div>
            </div>
        </div>

<div class="comments-list">
            
            <div class="comment-box">
                <div class="d-flex gap-3">
                    <img src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar" class="user-avatar">
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="mb-0">John Doe</h6>
                            <span class="comment-time">2 hours ago</span>
                        </div>
                        <p class="mb-2">This is an amazing post! Thanks for sharing your insights with us. I've
                            learned a lot from this.</p>
                        <div class="comment-actions">
                            <a href="#"><i class="bi bi-heart"></i> Like</a>
                            <a href="#"><i class="bi bi-reply"></i> Reply</a>
                            <a href="#"><i class="bi bi-share"></i> Share</a>
                        </div>
                    </div>
                </div>

<div class="reply-section mt-3">
                    <div class="comment-box">
                        <div class="d-flex gap-3">
                            <img src="https://randomuser.me/api/portraits/women/64.jpg" alt="User Avatar" class="user-avatar">
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h6 class="mb-0">Jane Smith</h6>
                                    <span class="comment-time">1 hour ago</span>
                                </div>
                                <p class="mb-2">Totally agree with you! The points mentioned are very insightful.
                                </p>
                                <div class="comment-actions">
                                    <a href="#"><i class="bi bi-heart"></i> Like</a>
                                    <a href="#"><i class="bi bi-reply"></i> Reply</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="comment-box">
                <div class="d-flex gap-3">
                    <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="User Avatar" class="user-avatar">
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="mb-0">Mike Johnson</h6>
                            <span class="comment-time">3 hours ago</span>
                        </div>
                        <p class="mb-2">Great discussion everyone! I'd like to add that this topic has many
                            interesting aspects we could explore further.</p>
                        <div class="comment-actions">
                            <a href="#"><i class="bi bi-heart"></i> Like</a>
                            <a href="#"><i class="bi bi-reply"></i> Reply</a>
                            <a href="#"><i class="bi bi-share"></i> Share</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Bootstrap comment box with reply
Comment form design

Author:
Ankit khedkar

11 months ago

5.1k

v.5.3
Simple comment form using Bootstrap 5

Author:
Anonymous

11 months ago

2.6k

v.5.3
Clean Modern Footer Design with Social Media
Elegant light-themed footer with interactive elements, newsletter signup, and social media integration built with Bootstrap 5.3.

Author:
Isaac Winslow

7 months ago

3k

v.5.3
Collapsible Sidebar

Author:
Alaric Sloane

7 months ago

27.8k

v.5.3
Service Cards with Hover Effects
service showcase component featuring neuromorphic design cards with smooth hover effects, gradient accents, and responsive layout.

Author:
Alaric Sloane

8 months ago

2k

v.5.3
Social media buttons
Beautiful and simple social media buttons

Author:
Maria Garcia

1 year ago

2.9k

v.5.3
Responsive video container

Author:
Anonymous

11 months ago

794

v.4.6
Responsive Products Grid

Author:
Ross Wille

11 months ago

2.2k

v.5.3
Interactive Star Rating
A dynamic star rating component where users can select their rating by clicking on stars. The rating can range from 1 to 5 stars, offering immediate visual feedback on hover and selection.

Author:
Mason Ashford

7 months ago

7.4k

v.5.3
Simple search bar

Author:
Reza Farhadi

10 months ago

3.2k

v.5.3
Bootstrap copyright footer

Author:
Anonymous

11 months ago

1.9k

v.5.3
Rating section
Rating section fit form for taking user ratings and reviews

Author:
Tane Mahuta

11 months ago

1.7k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent