→ 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

1.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

Simple comment form using Bootstrap 5

Author:
Anonymous

6 months ago

1.5k

v.5.3
Bootstrap comment box with reply
Comment form design

Author:
Ankit khedkar

6 months ago

2k

v.5.3
Product card component using Bootstrap 5

Author:
Mateo Rojas

1 month ago

160

v.5.3
Error Page, you can use HTML, CSS, and Bootstrap.
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects.

Author:
zobaidul kaziex

4 months ago

386

v.4.6
Sign in form with bootstrap 5
Beautiful sign-in card with Bootstrap 5

Author:
Prajwal Hallale

7 months ago

2.8k

v.5.3
Newsletter section

Author:
Anonymous

6 months ago

1.2k

v.4.6
Simple login form

Author:
Prajwal Hallale

9 months ago

3.3k

v.4.6
Responsive blog home layout

Author:
Juniper

3 months ago

1.2k

v.5.3
Logo cloud
Showcase your partners

Author:
Ankit khedkar

6 months ago

843

v.5.3
Product details page
Beautiful product detail page with

Author:
Edy Gafatrans (gafatrans)

1 week ago

84

v.5.3
Login modal

Author:
Prajwal Hallale

10 months ago

3.6k

v.4.6
Marquee Animation
On hover stop effect

Author:
Anonymous

6 months ago

2.7k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent