Bootstrap Comment Section with Replies — Free Snippet

<div class="container py-5" style="max-width:600px;">
  <h6 class="fw-bold mb-3">Comments (<span id="bscmCount">2</span>)</h6>

  <form class="mb-4" id="bscmForm">
    <div class="mb-2">
      <input type="text" class="form-control form-control-sm" id="bscmName" placeholder="Your name" required>
    </div>
    <div class="mb-2">
      <textarea class="form-control" id="bscmText" rows="2" placeholder="Add a comment..." required></textarea>
    </div>
    <button type="submit" class="btn btn-primary btn-sm">Post comment</button>
  </form>

  <div id="bscmList">
    <div class="bscm-item card mb-3">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <strong>Alex Rivera</strong>
          <span class="small text-muted">2h ago</span>
        </div>
        <p class="mb-2">This layout looks great on mobile too, nice work!</p>
        <div class="d-flex gap-3 align-items-center">
          <button type="button" class="btn btn-sm btn-link p-0 text-decoration-none bscm-like">
            <span class="bscm-heart">&#9825;</span> <span class="bscm-like-count">3</span>
          </button>
          <button type="button" class="btn btn-sm btn-link p-0 text-decoration-none bscm-reply-toggle">Reply</button>
        </div>
        <div class="bscm-reply-box d-none mt-2">
          <input type="text" class="form-control form-control-sm" placeholder="Write a reply...">
        </div>
      </div>
    </div>

    <div class="bscm-item card mb-3">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <strong>Priya Nair</strong>
          <span class="small text-muted">5h ago</span>
        </div>
        <p class="mb-2">Could you share the source for the icon set used here?</p>
        <div class="d-flex gap-3 align-items-center">
          <button type="button" class="btn btn-sm btn-link p-0 text-decoration-none bscm-like">
            <span class="bscm-heart">&#9825;</span> <span class="bscm-like-count">0</span>
          </button>
          <button type="button" class="btn btn-sm btn-link p-0 text-decoration-none bscm-reply-toggle">Reply</button>
        </div>
        <div class="bscm-reply-box d-none mt-2">
          <input type="text" class="form-control form-control-sm" placeholder="Write a reply...">
        </div>
      </div>
    </div>
  </div>
</div>

.bscm-item { border: 1px solid #eceef1; border-radius: 10px; }
.bscm-like.liked .bscm-heart { color: #dc3545; }
.bscm-heart { font-size: 1rem; }

const list = document.getElementById('bscmList');
const form = document.getElementById('bscmForm');
const nameInput = document.getElementById('bscmName');
const textInput = document.getElementById('bscmText');
const countLabel = document.getElementById('bscmCount');

function wireItem(item) {
  const likeBtn = item.querySelector('.bscm-like');
  const countSpan = item.querySelector('.bscm-like-count');
  const heart = item.querySelector('.bscm-heart');
  const replyToggle = item.querySelector('.bscm-reply-toggle');
  const replyBox = item.querySelector('.bscm-reply-box');

  likeBtn.addEventListener('click', () => {
    const liked = likeBtn.classList.toggle('liked');
    let count = parseInt(countSpan.textContent, 10) || 0;
    count = liked ? count + 1 : Math.max(0, count - 1);
    countSpan.textContent = count;
    heart.innerHTML = liked ? '♥' : '♡';
  });

  replyToggle.addEventListener('click', () => {
    replyBox.classList.toggle('d-none');
    if (!replyBox.classList.contains('d-none')) {
      replyBox.querySelector('input').focus();
    }
  });
}

document.querySelectorAll('.bscm-item').forEach(wireItem);

function updateCount() {
  countLabel.textContent = document.querySelectorAll('#bscmList > .bscm-item').length;
}

form.addEventListener('submit', e => {
  e.preventDefault();
  const name = nameInput.value.trim();
  const text = textInput.value.trim();
  if (!name || !text) return;

  const item = document.createElement('div');
  item.className = 'bscm-item card mb-3';
  item.innerHTML = `
    <div class="card-body">
      <div class="d-flex justify-content-between">
        <strong></strong>
        <span class="small text-muted">just now</span>
      </div>
      <p class="mb-2"></p>
      <div class="d-flex gap-3 align-items-center">
        <button type="button" class="btn btn-sm btn-link p-0 text-decoration-none bscm-like">
          <span class="bscm-heart">&#9825;</span> <span class="bscm-like-count">0</span>
        </button>
        <button type="button" class="btn btn-sm btn-link p-0 text-decoration-none bscm-reply-toggle">Reply</button>
      </div>
      <div class="bscm-reply-box d-none mt-2">
        <input type="text" class="form-control form-control-sm" placeholder="Write a reply...">
      </div>
    </div>`;

  // Text content is assigned via textContent (never innerHTML) for the
  // user-supplied name and comment, avoiding an HTML/script injection path.
  item.querySelector('strong').textContent = name;
  item.querySelector('p').textContent = text;

  list.insertBefore(item, list.firstChild);
  wireItem(item);
  updateCount();

  form.reset();
});