Bootstrap 5 Comment Box Template

Creating a comment box is a great way for users to engage with your website. This Bootstrap 5 Comment Box Template allows users to add comments to a webpage. It features a text input for names and comments. The template validates the inputs and displays an error message if fields are empty.

When valid information is submitted, the comment, name, and timestamp are displayed in a formatted table. This template helps create a user-friendly comment section on your website.

How to Create Bootstrap 5 Comment Box Template

1. First, load the Bootstrap 5 CSS by adding the following CDN link into the head tag of your HTML document.

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

2. Now, let’s create the basic structure of our comment box using HTML. We need input fields for the name and comment, a submit button, and a table to display the comments.

<div class="container">
  <div class="jumbotron">
    <h1>Comment Box</h1>
  </div>
  
  <div class="row">
    <div class="col-sm-2"></div>
    <div class="col-sm-10">
      <form class="form">
        <div class="mb-3">
          <label for="name" class="form-label">Name:</label>
          <input type="text" class="form-control" id="name" name="name" required>
        </div>
        <div class="mb-3">
          <label for="comment" class="form-label">Comment:</label>
          <textarea class="form-control" rows="5" id="comment" required></textarea>
        </div>
        <button type="button" onclick="addComment()" id="myBtn" class="btn btn-primary">Submit</button>
      </form>
      <p id="warning" class="mt-3"></p>
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm-2"></div>
    <div class="col-sm-10">
      <div class="table-responsive">
        <table id="resultTable" class="table table-striped">
          <tbody id="resultBody"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

3. Style the comment box using CSS to make it look neat and visually appealing. You can modify the CSS styles according to your needs.

.jumbotron {
  text-align: center;
}
td{
  padding: .4em;
}
.comName{
  width: 70%;
  text-align: 'left';
}
table{
  width: 100%;
  table-layout: fixed;
}

.dateTable{
  width: 30%;
}
.nameTag{
  font-weight:"bold";
}

4. Load the jQuery and Moment JS by adding the following CDN links just before closing the body tag:

<!-- jQuery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js'></script>
<!-- Moment JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.js'></script>

5. Finally, add JavaScript to handle the comment submission process. This script will validate the input fields and display the comments.

var name = "";
var comment = "";

function addComment() {
  var name = document.getElementById("name").value;
  var comment = document.getElementById("comment").value;

  var name2 = document.getElementById("name");

  if (name == "" || comment == "") {
    if (name == "") {
      document.getElementById("name").value = "Please enter your name";
      document.getElementById("name").style.color = "red";
    }
    if (comment == "") {
      document.getElementById("comment").value = "Please enter your comment";
      document.getElementById("comment").style.color = "red";
    }
  } else if (
    name == "Please enter your name" ||
    comment == "Please enter your comment"
  ) {
    name2.style.color = "black";
          }
  
  else {
    var d = new Date($.now());
    var now = moment().format("d/M/Y h:mm:ss A");
    name.bold();
    var nameResult = $("<td class='nameTag'></td>").text(name + " says");
    var commentResult = $("<td></td>").text(now);

    var newRow = $("<tr></tr>").append(nameResult, commentResult);

    var comResult = $("<td colspan='2'></td>").text(comment);

    var commentRow = $("<tr></tr>").append(comResult);
    $("#resultBody").append(newRow, commentRow);
    nameTag.style.fontWeight = "bold";
  }

  // $("#commentTable").append("<tr><td class='dateTable'>"+d.toDateString()+"</td><td class='comName'>"+name+"</td></tr><tr><td class='comCom'>"+comment+"</td></tr>");

  // $("#commentArea").append("<div class='panel-heading'>"+name+"</div>");

  // var txt2 = $("<div class='panel-heading'></div>").text(name);
  //$("#resultsPanel").append("<tr><td>"+name+"</td><td style='text-align:'right''>"+comment+"</td></tr>");
  //var txt3 = $("<div class='panel-body'></div>").text(comment);
  //var txt4 = $("<div class='panel-footer'>Panel Footer</div>").text(d.toDateString())
  //$("#results").append(txt2, txt3, txt4);
}

That’s all! hopefully, you have successfully created a Comment Box on your website. If you have any questions or suggestions, feel free to comment below.