DocsAllOver Responsive Bootstrap 5 Comment Submission Form Box Snippets

Responsive Bootstrap 5 Comment Submission Form Box

April 27, 2025

Bootstrap, Bootstrap 5, Responsive, Card, Clean UI, Form, Ecommerce

Full Screen

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Bootstrap 5 Comment Submission Form Box</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
</head>
<body>
<section class="bg-light py-5 py-xl-6">
  <div class="container mb-5 mb-md-6">
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6 text-center">
        <h1 class="mb-4 display-5 fw-bold">Post Your Comment</h1>
        <h5 class="text-secondary mb-4 mb-md-5">Let us know what you think about this.</h5>
        <hr class="w-50 mx-auto mb-0 text-secondary">
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row justify-content-lg-center">
      <div class="col-12 col-lg-9">
          <div class="bg-white border rounded shadow-sm overflow-hidden">
            <form action="#!">
              <div class="row gy-4 gy-xl-5 p-4 p-xl-5">
                <div class="col-12 col-md-4">
                  <label for="fullname" class="form-label">Name <span class="text-danger">*</span></label>
                  <div class="input-group">
                    <span class="input-group-text">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
                        <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
                      </svg>
                    </span>
                    <input type="text" class="form-control" id="fullname" value="" required>
                  </div>
                </div>
                <div class="col-12 col-md-4">
                  <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                  <div class="input-group">
                    <span class="input-group-text">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
                        <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z" />
                      </svg>
                    </span>
                    <input type="email" class="form-control" id="email" value="" required>
                  </div>
                </div>
                <div class="col-12 col-md-4">
                  <label for="website" class="form-label">Website</label>
                  <div class="input-group">
                    <span class="input-group-text">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
                        <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z" />
                      </svg>
                    </span>
                    <input type="url" class="form-control" id="website" value="">
                  </div>
                </div>
                <div class="col-12">
                  <label for="comment" class="form-label">Comment <span class="text-danger">*</span></label>
                  <textarea class="form-control" id="comment" rows="3" required></textarea>
                </div>
                <div class="col-12">
                  <input class="form-check-input" type="checkbox" value="" id="savecheck">
                  <label class="form-check-label" for="savecheck">
                    Save my data in this browser for the next time I comment.
                  </label>
                </div>
                <div class="col-12">
                  <div class="d-grid">
                    <button class="btn btn-primary btn-lg" type="submit">Post Comment</button>
                  </div>
                </div>
              </div>
            </form>
          </div>
      </div>
    </div>
  </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.min.js" integrity="sha384-VQqxDN0EQCkWoxt/0vsQvZswzTHUVOImccYmSyhJTp7kGtPed0Qcx8rK9h9YEgx+" crossorigin="anonymous"></script>
</body>
</html>

.g-6,
.gx-6 {
    --bs-gutter-x: 4.5rem;
}

.g-6,
.gy-6 {
    --bs-gutter-y: 4.5rem;
}

@media (min-width: 576px) {

    .g-sm-6,
    .gx-sm-6 {
        --bs-gutter-x: 4.5rem;
    }

    .g-sm-6,
    .gy-sm-6 {
        --bs-gutter-y: 4.5rem;
    }
}

@media (min-width: 768px) {

    .g-md-6,
    .gx-md-6 {
        --bs-gutter-x: 4.5rem;
    }

    .g-md-6,
    .gy-md-6 {
        --bs-gutter-y: 4.5rem;
    }
}

@media (min-width: 992px) {

    .g-lg-6,
    .gx-lg-6 {
        --bs-gutter-x: 4.5rem;
    }

    .g-lg-6,
    .gy-lg-6 {
        --bs-gutter-y: 4.5rem;
    }
}

@media (min-width: 1200px) {

    .g-xl-6,
    .gx-xl-6 {
        --bs-gutter-x: 4.5rem;
    }

    .g-xl-6,
    .gy-xl-6 {
        --bs-gutter-y: 4.5rem;
    }
}

@media (min-width: 1400px) {

    .g-xxl-6,
    .gx-xxl-6 {
        --bs-gutter-x: 4.5rem;
    }

    .g-xxl-6,
    .gy-xxl-6 {
        --bs-gutter-y: 4.5rem;
    }
}

.mb-6 {
    margin-bottom: 4.5rem !important;
}

.py-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
}

@media (min-width: 576px) {
    .mb-sm-6 {
        margin-bottom: 4.5rem !important;
    }

    .py-sm-6 {
        padding-top: 4.5rem !important;
        padding-bottom: 4.5rem !important;
    }
}

@media (min-width: 768px) {
    .mb-md-6 {
        margin-bottom: 4.5rem !important;
    }

    .py-md-6 {
        padding-top: 4.5rem !important;
        padding-bottom: 4.5rem !important;
    }
}

@media (min-width: 992px) {
    .mb-lg-6 {
        margin-bottom: 4.5rem !important;
    }

    .py-lg-6 {
        padding-top: 4.5rem !important;
        padding-bottom: 4.5rem !important;
    }
}

@media (min-width: 1200px) {
    .mb-xl-6 {
        margin-bottom: 4.5rem !important;
    }

    .py-xl-6 {
        padding-top: 4.5rem !important;
        padding-bottom: 4.5rem !important;
    }
}

@media (min-width: 1400px) {
    .mb-xxl-6 {
        margin-bottom: 4.5rem !important;
    }

    .py-xxl-6 {
        padding-top: 4.5rem !important;
        padding-bottom: 4.5rem !important;
    }
}

//Doesn't require any JS.

This Bootstrap 5 snippet showcases a clean and user-friendly comment submission form, providing an essential interface for website visitors to share their thoughts and feedback. The form is designed to be responsive, ensuring seamless interaction across various screen sizes.

Key Features:

Responsive Design: The comment form adapts smoothly to different screen sizes, providing a consistent and usable experience on desktops, tablets, and mobile devices.
Clear Input Fields: Features well-defined input fields for name, email (optional), and the comment text, guiding users through the submission process.
Bootstrap 5 Integration: Leverages Bootstrap 5's form components and utility classes for consistent styling and layout.
Simple Implementation: Offers a straightforward way to incorporate a functional comment form into any Bootstrap 5 project.

Implementation:

Include Bootstrap 5: Ensure Bootstrap 5 CSS and JS files are included in your project.
Create the HTML Structure: Set up the basic HTML structure for the comment form, including labels, input fields (<input> and <textarea>), and a submit button.
Apply Bootstrap Classes: Use Bootstrap's form classes (e.g., form-control, form-label, btn) to style the form elements.

By following these steps, you can create a responsive and easy-to-use comment submission form within your Bootstrap 5 projects, facilitating valuable interaction with your website visitors.

Latest Snippets

View All