Bootstrap 5 Feedback Form | Responsive Feedback Page Design using Bootstrap 5

In this tutorial, you will learn how to create a responsive Feedback Form using Bootstrap 5 without writing any extra CSS.

Bootstrap 5 Feedback Form | Responsive Feedback Page Design using Bootstrap 5 (No CSS) #theproviders

This tutorial is specially designed for beginners, as Bootstrap 5 was newly launched and provides powerful built-in classes to make forms responsive and user-friendly.

Let's Design Feedback Page using HTML & Bootstrap 5.

HTML

                            
                                <!DOCTYPE html>  
<html> 

<head> 
  <title>Feedback page</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
    integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<body
  style="background-image: url(https://static.vecteezy.com/packs/media/vectors/term-bg-1-3d6355ab.jpg);background-size: cover;">

  <div class="container ">
    <div class="row">
      <div class="col-md-3"></div>
      <div class="col-md-6">
        <h2 class="text-white">Feedback Form</h2>
        <p class="text-white">We would love to hear your thoughts, concerns or problem with anything so we can improve!
        </p>
        <hr>
        <form>
          <h4 class="text-white">Feedback type</h4>
          <div class="row ">
            <div class="col-md-4 text-white">
              <input type="radio" name="feed" class="pointer">&nbsp;&nbsp;<label>Comments</label>
            </div>
            <div class="col-md-4">
              <input type="radio" name="feed">&nbsp;&nbsp;<label>Bug Reports</label>
            </div>
            <div class="col-md-4">
              <input type="radio" name="feed">&nbsp;&nbsp;<label>Questions</label>
            </div>
          </div>

          <div class="form-group mt-3 mb-3">
            <label class="form-label">Full Name</label>
            <input type="text" class="form-control " required="">
          </div>
          <div class="form-group mb-2">
            <label class="form-label">Email</label>
            <input type="Email" class="form-control" required="">
          </div>
          <div class="form-group mb-2">
            <label class="form-label">Describe Feedback:</label>
            <textarea rows="4" class="form-control" required=""></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Submit feedback</button>
        </form>

      </div>

    </div>

  </div>
</body>  
</html>

Download Code Files