→ 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.3k

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

2.9k

v.5.3
Bootstrap comment box with reply
Comment form design

Author:
Ankit khedkar

1 year ago

6.7k

v.5.3
Collapsible Sidebar

Author:
Anonymous

7 months ago

5.5k

v.5.3
Newsletter Form
Rounded newsletter form

Author:
Ross Wille

1 year ago

2.6k

v.5.3
Search section

Author:
M Rashid

4 months ago

799

v.5.3
Animated Pricing Card with Bootstrap 5

Author:
Reza Farhadi

1 year ago

794

v.5.3
navbar
navbar 2 line

Author:
almounkez

10 months ago

1.4k

v.4.6
Testimonial
with auto-scrolling testimonial cards

Author:
Sofia Petrova

1 year ago

5.6k

v.5.3
Product Modal with JS

Author:
java stories story

1 month ago

440

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

1 year ago

1.8k

v.4.6
Interactive left-Side Menu test
will need to be responsive

Author:
Ben Kremer

6 months ago

4.2k

v.5.3
CTA block
Beautiful CTA section with a form

Author:
Ross Wille

1 year ago

1.4k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent