→ Ankit khedkar
→ Bootstrap comment box with reply

Bootstrap comment box with reply

Comment form design

This bootstrap css example is contributed by Ankit khedkar, on 17-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Comment

Author Ankit khedkar

8.7k

v.5.3

Fork Fullscreen

<div class="comments-list">
      
      <div class="card mb-3">
        <div class="card-body">
          <div class="d-flex mb-3">
            <img src="https://via.placeholder.com/50" class="rounded-circle me-3" alt="User Avatar">
            <div>
              <h5 class="card-title mb-0">John Doe</h5>
              <small class="text-muted">Posted on July 17, 2024</small>
            </div>
          </div>
          <p class="card-text">This is a great article! I learned a lot from it. Keep up the good work!</p>
          <div class="d-flex justify-content-end">
            <button class="btn btn-sm btn-outline-primary me-2">
              <i class="bi bi-hand-thumbs-up"></i> Like
            </button>
            <button class="btn btn-sm btn-outline-secondary">
              <i class="bi bi-reply"></i> Reply
            </button>
          </div>
        </div>
      </div>

<div class="card mb-3">
        <div class="card-body">
          <div class="d-flex mb-3">
            <img src="https://via.placeholder.com/50" class="rounded-circle me-3" alt="User Avatar">
            <div>
              <h5 class="card-title mb-0">Jane Smith</h5>
              <small class="text-muted">Posted on July 16, 2024</small>
            </div>
          </div>
          <p class="card-text">I have a question about one of the points you made. Could you elaborate more on...</p>
          <div class="d-flex justify-content-end">
            <button class="btn btn-sm btn-outline-primary me-2">
              <i class="bi bi-hand-thumbs-up"></i> Like
            </button>
            <button class="btn btn-sm btn-outline-secondary">
              <i class="bi bi-reply"></i> Reply
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

More Examples

Simple comment form using Bootstrap 5

Author:
Anonymous

1 year ago

3.4k

v.5.3
Beutifull Comment Section Bootstrap - 5
The comment section for your website

Author:
Asmath

1 year ago

6.6k

v.5.3
Footer
Footer de Bootstrap con enlaces rápidos, contacto y redes sociales, usando íconos para mejor navegación. Diseño limpio y responsivo. 🚀

Author:
Anonymous

1 year ago

5.2k

v.4.6
Basic landing page with bootstrap

Author:
Asmath

1 year ago

2k

v.5.3
Underlined Tabs with bootstrap 5
Minimal design with underline indicator it has Smooth transitions

Author:
Prajwal Hallale

1 year ago

4.5k

v.5.3
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.6k

v.4.6
Pricing Card
with the most popular tag

Author:
Sofia Petrova

1 year ago

2.1k

v.5.3
Success modal

Author:
Alaric Sloane

1 year ago

5.2k

v.5.3
Bootstrap user profile
User profile card made with bootstrap

Author:
Anonymous

1 year ago

7.7k

v.5.3
Pulsing Button with Bootstrap 5

Author:
Andreas Müller

1 year ago

2.8k

v.5.3
Carousel

Author:
Anonymous

2 years ago

1.9k

v.4.6
Responsive Testimonials

Author:
Anonymous

1 year ago

1.6k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent