→ 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

5.6k

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

Simple comment form using Bootstrap 5

Author:
Anonymous

1 year ago

3k

v.5.3
Bootstrap comment box with reply
Comment form design

Author:
Ankit khedkar

1 year ago

7.1k

v.5.3
Navbar
a responsive navbar with search

Author:
Prajwal Hallale

1 year ago

7.3k

v.5.3
Minimal Changelog Page Template design

Author:
Asmath

10 months ago

2.3k

v.5.3
Button group
solid button group

Author:
Mishti

1 year ago

1.1k

v.5.3
Bootstrap Image Gallery

Author:
Anonymous

1 year ago

4.8k

v.3.4
Bootstrap video player
Video player with buttons

Author:
Kemaya m

1 year ago

5.9k

v.5.3
Basic Breadcrumb

Author:
Mateo Rojas

10 months ago

985

v.5.3
B- Bootstrap homepage with background color, hover effects, animations, and shadows added to enhance the design
B-Features Added: Background Gradient: A smooth gradient background using linear-gradient. Card Shadow and Hover Effect: The card now lifts up with a shadow (box-shadow) and smooth transition (transform) on hover. Button Customization: A custom round button with hover color change. Animation: The card content animates with a "fade-in-up" effect using keyframe animation.

Author:
Bhavik Shah

7 months ago

2.1k

v.4.6
progress-steps
progress-steps

Author:
Rami AlAjo

8 months ago

1.6k

v.4.6
Modern Bootstrap Search Bar

Author:
Anonymous

11 months ago

5.4k

v.5.3
Footer
Simple footer with social icons

Author:
Prajwal Hallale

1 year ago

11.8k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent