→ 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

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

3.3k

v.5.3
Bootstrap comment box with reply
Comment form design

Author:
Ankit khedkar

1 year ago

8.4k

v.5.3
Music Player
Working music player With start top buttons and progress bar

Author:
Anonymous

1 month ago

204

v.5.3
Bootstrap 5 chat template

Author:
Andreas Müller

1 year ago

3.2k

v.5.3
Invoice template with bootstrap

Author:
Anonymous

1 year ago

1.3k

v.4.6
Responsive footer using HTML 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. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

1 year ago

9.2k

v.4.6
Profile card
Profile card with images and buttons

Author:
Anonymous

1 year ago

7.4k

v.4.6
User avatar card

Author:
Anonymous

1 year ago

2.9k

v.5.3
Testimonial carousel

Author:
Sofia Petrova

1 year ago

2.2k

v.5.3
Audio player with bootstrap

Author:
Arturo

1 year ago

4.3k

v.5.3
404 made with bootstrap
error page template with boostrap

Author:
Anonymous

1 year ago

1.5k

v.5.3
Copy Code Section
Code block with working copy option

Author:
Kemaya m

1 year ago

3k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent