Registration form

Bootstrap 5 Registration form component

Responsive Registration form built with Bootstrap 5. Free signup form templates & pages ready to download. Various design and functionalities.


Basic example

Sign up

Sample image

          <section class="vh-100" style="background-color: #eee;">
            <div class="container h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-lg-12 col-xl-11">
                  <div class="card text-black" style="border-radius: 25px;">
                    <div class="card-body p-md-5">
                      <div class="row justify-content-center">
                        <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
      
                          <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>
      
                          <form class="mx-1 mx-md-4">
      
                            <div class="d-flex flex-row align-items-center mb-4">
                              <i class="fas fa-user fa-lg me-3 fa-fw"></i>
                              <div class="form-outline flex-fill mb-0">
                                <input type="text" id="form3Example1c" class="form-control" />
                                <label class="form-label" for="form3Example1c">Your Name</label>
                              </div>
                            </div>
      
                            <div class="d-flex flex-row align-items-center mb-4">
                              <i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
                              <div class="form-outline flex-fill mb-0">
                                <input type="email" id="form3Example3c" class="form-control" />
                                <label class="form-label" for="form3Example3c">Your Email</label>
                              </div>
                            </div>
      
                            <div class="d-flex flex-row align-items-center mb-4">
                              <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
                              <div class="form-outline flex-fill mb-0">
                                <input type="password" id="form3Example4c" class="form-control" />
                                <label class="form-label" for="form3Example4c">Password</label>
                              </div>
                            </div>
      
                            <div class="d-flex flex-row align-items-center mb-4">
                              <i class="fas fa-key fa-lg me-3 fa-fw"></i>
                              <div class="form-outline flex-fill mb-0">
                                <input type="password" id="form3Example4cd" class="form-control" />
                                <label class="form-label" for="form3Example4cd">Repeat your password</label>
                              </div>
                            </div>
      
                            <div class="form-check d-flex justify-content-center mb-5">
                              <input
                                class="form-check-input me-2"
                                type="checkbox"
                                value=""
                                id="form2Example3c"
                              />
                              <label class="form-check-label" for="form2Example3">
                                I agree all statements in <a href="#!">Terms of service</a>
                              </label>
                            </div>
      
                            <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
                              <button type="button" class="btn btn-primary btn-lg">Register</button>
                            </div>
      
                          </form>
      
                        </div>
                        <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
      
                          <img src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-registration/draw1.png" class="img-fluid" alt="Sample image">
      
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

Registration form #2

Sample photo

Registration Info


          <section class="h-100 h-custom" style="background-color: #8fc4b7;">
            <div class="container py-5 h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-lg-8 col-xl-6">
                  <div class="card rounded-3">
                    <img src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-registration/img3.jpg" class="w-100" style="border-top-left-radius: .3rem; border-top-right-radius: .3rem;" alt="Sample photo">
                    <div class="card-body p-4 p-md-5">
                      <h3 class="mb-4 pb-2 pb-md-0 mb-md-5 px-md-2">Registration Info</h3>
      
                      <form class="px-md-2">
      
                        <div class="form-outline mb-4">
                          <input type="text" id="form3Example1q" class="form-control" />
                          <label class="form-label" for="form3Example1q">Name</label>
                        </div>
      
                        <div class="row">
                          <div class="col-md-6 mb-4">
      
                            <div class="form-outline datepicker">
                              <input
                                type="text"
                                class="form-control"
                                id="exampleDatepicker1"
                              />
                              <label for="exampleDatepicker1" class="form-label">Select a date</label>
                            </div>
      
                          </div>
                          <div class="col-md-6 mb-4">
      
                            <select class="select">
                              <option value="1" disabled>Gender</option>
                              <option value="2">Female</option>
                              <option value="3">Male</option>
                              <option value="4">Other</option>
                            </select>
      
                          </div>
                        </div>
      
                        <div class="mb-4">
      
                          <select class="select">
                            <option value="1" disabled>Class</option>
                            <option value="2">Class 1</option>
                            <option value="3">Class 2</option>
                            <option value="4">Class 3</option>
                          </select>
      
                        </div>
      
                        <div class="row mb-4 pb-2 pb-md-0 mb-md-5">
                          <div class="col-md-6">
      
                            <div class="form-outline">
                              <input type="text" id="form3Example1w" class="form-control" />
                              <label class="form-label" for="form3Example1w">Registration code</label>
                            </div>
      
                          </div>
                        </div>
      
                        <button type="submit" class="btn btn-success btn-lg mb-1">Submit</button>
      
                      </form>
      
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

          @media (min-width: 1025px) {
            .h-custom {
              height: 100vh !important;
            }
          }
        

Registration form #3

Registration Form

Gender:

          <section class="vh-100 gradient-custom">
            <div class="container py-5 h-100">
              <div class="row justify-content-center align-items-center h-100">
                <div class="col-12 col-lg-9 col-xl-7">
                  <div class="card shadow-2-strong card-registration" style="border-radius: 15px;">
                    <div class="card-body p-4 p-md-5">
                      <h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Registration Form</h3>
                      <form>
        
                        <div class="row">
                          <div class="col-md-6 mb-4">
        
                            <div class="form-outline">
                              <input type="text" id="firstName" class="form-control form-control-lg" />
                              <label class="form-label" for="firstName">First Name</label>
                            </div>
        
                          </div>
                          <div class="col-md-6 mb-4">
        
                            <div class="form-outline">
                              <input type="text" id="lastName" class="form-control form-control-lg" />
                              <label class="form-label" for="lastName">Last Name</label>
                            </div>
        
                          </div>
                        </div>
        
                        <div class="row">
                          <div class="col-md-6 mb-4 d-flex align-items-center">
        
                            <div class="form-outline datepicker w-100">
                              <input
                                type="text"
                                class="form-control form-control-lg"
                                id="birthdayDate"
                              />
                              <label for="birthdayDate" class="form-label">Birthday</label>
                            </div>
        
                          </div>
                          <div class="col-md-6 mb-4">
        
                            <h6 class="mb-2 pb-1">Gender: </h6>
        
                            <div class="form-check form-check-inline">
                              <input
                                class="form-check-input"
                                type="radio"
                                name="inlineRadioOptions"
                                id="femaleGender"
                                value="option1"
                                checked
                              />
                              <label class="form-check-label" for="femaleGender">Female</label>
                            </div>
        
                            <div class="form-check form-check-inline">
                              <input
                                class="form-check-input"
                                type="radio"
                                name="inlineRadioOptions"
                                id="maleGender"
                                value="option2"
                              />
                              <label class="form-check-label" for="maleGender">Male</label>
                            </div>
        
                            <div class="form-check form-check-inline">
                              <input
                                class="form-check-input"
                                type="radio"
                                name="inlineRadioOptions"
                                id="otherGender"
                                value="option3"
                              />
                              <label class="form-check-label" for="otherGender">Other</label>
                            </div>
        
                          </div>
                        </div>
        
                        <div class="row">
                          <div class="col-md-6 mb-4 pb-2">
        
                            <div class="form-outline">
                              <input type="email" id="emailAddress" class="form-control form-control-lg" />
                              <label class="form-label" for="emailAddress">Email</label>
                            </div>
        
                          </div>
                          <div class="col-md-6 mb-4 pb-2">
        
                            <div class="form-outline">
                              <input type="tel" id="phoneNumber" class="form-control form-control-lg" />
                              <label class="form-label" for="phoneNumber">Phone Number</label>
                            </div>
        
                          </div>
                        </div>
        
                        <div class="row">
                          <div class="col-12">
        
                            <select class="select form-control-lg">
                              <option value="1" disabled>Choose option</option>
                              <option value="2">Subject 1</option>
                              <option value="3">Subject 2</option>
                              <option value="4">Subject 3</option>
                            </select>
                            <label class="form-label select-label">Choose option</label>
        
                          </div>
                        </div>
      
                        <div class="mt-4 pt-2">
                          <input class="btn btn-primary btn-lg" type="submit" value="Submit" />
                        </div>
        
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

          .gradient-custom {
            /* fallback for old browsers */
            background: #f093fb;
    
            /* Chrome 10-25, Safari 5.1-6 */
            background: -webkit-linear-gradient(to bottom right, rgba(240, 147, 251, 1), rgba(245, 87, 108, 1));
    
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            background: linear-gradient(to bottom right, rgba(240, 147, 251, 1), rgba(245, 87, 108, 1))
          }
    
          .card-registration .select-input.form-control[readonly]:not([disabled]) {
            font-size: 1rem;
            line-height: 2.15;
            padding-left: .75em;
            padding-right: .75em;
          }
          .card-registration .select-arrow {
            top: 13px;
          }
        

Registration form #4

Sample photo

Student registration form

Gender:

          <section class="h-100 bg-dark">
            <div class="container py-5 h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col">
                  <div class="card card-registration my-4">
                    <div class="row g-0">
                      <div class="col-xl-6 d-none d-xl-block">
                        <img
                          src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-registration/img4.jpg"
                          alt="Sample photo"
                          class="img-fluid"
                          style="border-top-left-radius: .25rem; border-bottom-left-radius: .25rem;"
                        />
                      </div>
                      <div class="col-xl-6">
                        <div class="card-body p-md-5 text-black">
                          <h3 class="mb-5 text-uppercase">Student registration form</h3>
      
                          <div class="row">
                            <div class="col-md-6 mb-4">
                              <div class="form-outline">
                                <input type="text" id="form3Example1m" class="form-control form-control-lg" />
                                <label class="form-label" for="form3Example1m">First name</label>
                              </div>
                            </div>
                            <div class="col-md-6 mb-4">
                              <div class="form-outline">
                                <input type="text" id="form3Example1n" class="form-control form-control-lg" />
                                <label class="form-label" for="form3Example1n">Last name</label>
                              </div>
                            </div>
                          </div>
      
                          <div class="row">
                            <div class="col-md-6 mb-4">
                              <div class="form-outline">
                                <input type="text" id="form3Example1m1" class="form-control form-control-lg" />
                                <label class="form-label" for="form3Example1m1">Mother's name</label>
                              </div>
                            </div>
                            <div class="col-md-6 mb-4">
                              <div class="form-outline">
                                <input type="text" id="form3Example1n1" class="form-control form-control-lg" />
                                <label class="form-label" for="form3Example1n1">Father's name</label>
                              </div>
                            </div>
                          </div>
      
                          <div class="form-outline mb-4">
                            <input type="text" id="form3Example8" class="form-control form-control-lg" />
                            <label class="form-label" for="form3Example8">Address</label>
                          </div>
      
                          <div class="d-md-flex justify-content-start align-items-center mb-4 py-2">
      
                            <h6 class="mb-0 me-4">Gender: </h6>
          
                            <div class="form-check form-check-inline mb-0 me-4">
                              <input
                                class="form-check-input"
                                type="radio"
                                name="inlineRadioOptions"
                                id="femaleGender"
                                value="option1"
                              />
                              <label class="form-check-label" for="femaleGender">Female</label>
                            </div>
          
                            <div class="form-check form-check-inline mb-0 me-4">
                              <input
                                class="form-check-input"
                                type="radio"
                                name="inlineRadioOptions"
                                id="maleGender"
                                value="option2"
                              />
                              <label class="form-check-label" for="maleGender">Male</label>
                            </div>
          
                            <div class="form-check form-check-inline mb-0">
                              <input
                                class="form-check-input"
                                type="radio"
                                name="inlineRadioOptions"
                                id="otherGender"
                                value="option3"
                              />
                              <label class="form-check-label" for="otherGender">Other</label>
                            </div>
          
                          </div>
      
                          <div class="row">
                            <div class="col-md-6 mb-4">
      
                              <select class="select">
                                <option value="1">State</option>
                                <option value="2">Option 1</option>
                                <option value="3">Option 2</option>
                                <option value="4">Option 3</option>
                              </select>
      
                            </div>
                            <div class="col-md-6 mb-4">
      
                              <select class="select">
                                <option value="1">City</option>
                                <option value="2">Option 1</option>
                                <option value="3">Option 2</option>
                                <option value="4">Option 3</option>
                              </select>
      
                            </div>
                          </div>
      
                          <div class="form-outline mb-4">
                            <input type="text" id="form3Example9" class="form-control form-control-lg" />
                            <label class="form-label" for="form3Example9">DOB</label>
                          </div>
      
                          <div class="form-outline mb-4">
                            <input type="text" id="form3Example90" class="form-control form-control-lg" />
                            <label class="form-label" for="form3Example90">Pincode</label>
                          </div>
      
                          <div class="form-outline mb-4">
                            <input type="text" id="form3Example99" class="form-control form-control-lg" />
                            <label class="form-label" for="form3Example99">Course</label>
                          </div>
      
                          <div class="form-outline mb-4">
                            <input type="text" id="form3Example97" class="form-control form-control-lg" />
                            <label class="form-label" for="form3Example97">Email ID</label>
                          </div>
      
                          <div class="d-flex justify-content-end pt-3">
                            <button type="button" class="btn btn-light btn-lg">Reset all</button>
                            <button type="button" class="btn btn-warning btn-lg ms-2">Submit form</button>
                          </div>
      
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

          .card-registration .select-input.form-control[readonly]:not([disabled]) {
            font-size: 1rem;
            line-height: 2.15;
            padding-left: .75em;
            padding-right: .75em;
          }
          .card-registration .select-arrow {
            top: 13px;
          }
        

Registration form #5

Apply for a job

Full name

Email address

Full name

Upload CV
Upload your CV/Resume or any other relevant file. Max file size 50 MB


          <section class="vh-100" style="background-color: #2779e2;">
            <div class="container h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-xl-9">
                  
                  <h1 class="text-white mb-4">Apply for a job</h1>
      
                  <div class="card" style="border-radius: 15px;">
                    <div class="card-body">
      
                      <div class="row align-items-center pt-4 pb-3">
                        <div class="col-md-3 ps-5">
      
                          <h6 class="mb-0">Full name</h6>
      
                        </div>
                        <div class="col-md-9 pe-5">
      
                          <input type="text" class="form-control form-control-lg" />
      
                        </div>
                      </div>
      
                      <hr class="mx-n3">
      
                      <div class="row align-items-center py-3">
                        <div class="col-md-3 ps-5">
      
                          <h6 class="mb-0">Email address</h6>
      
                        </div>
                        <div class="col-md-9 pe-5">
      
                          <input type="email" class="form-control form-control-lg" placeholder="example@example.com" />
      
                        </div>
                      </div>
      
                      <hr class="mx-n3">
      
                      <div class="row align-items-center py-3">
                        <div class="col-md-3 ps-5">
      
                          <h6 class="mb-0">Full name</h6>
      
                        </div>
                        <div class="col-md-9 pe-5">
      
                          <textarea class="form-control" rows="3" placeholder="Message sent to the employer"></textarea>
      
                        </div>
                      </div>
      
                      <hr class="mx-n3">
      
                      <div class="row align-items-center py-3">
                        <div class="col-md-3 ps-5">
      
                          <h6 class="mb-0">Upload CV</h6>
      
                        </div>
                        <div class="col-md-9 pe-5">
      
                          <input class="form-control form-control-lg" id="formFileLg" type="file" />
                          <div class="small text-muted mt-2">Upload your CV/Resume or any other relevant file. Max file size 50 MB</div>
      
                        </div>
                      </div>
      
                      <hr class="mx-n3">
      
                      <div class="px-5 py-4">
                        <button type="submit" class="btn btn-primary btn-lg">Send application</button>
                      </div>
      
                    </div>
                  </div>
      
                </div>
              </div>
            </div>
          </section>
        

Registration form #6

General Infomation

Contact Details


          <section class="h-100 h-custom gradient-custom-2">
            <div class="container py-5 h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-12">
                  <div class="card card-registration card-registration-2" style="border-radius: 15px;">
                    <div class="card-body p-0">
                      <div class="row g-0">
                        <div class="col-lg-6">
                          <div class="p-5">
                            <h3 class="fw-normal mb-5" style="color: #4835d4;">General Infomation</h3>
      
                            <div class="mb-4 pb-2">
                              <select class="select">
                                <option value="1">Title</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                                <option value="4">Four</option>
                              </select>
                            </div>
      
                            <div class="row">
                              <div class="col-md-6 mb-4 pb-2">
      
                                <div class="form-outline">
                                  <input type="text" id="form3Examplev2" class="form-control form-control-lg" />
                                  <label class="form-label" for="form3Examplev2">First name</label>
                                </div>
      
                              </div>
                              <div class="col-md-6 mb-4 pb-2">
      
                                <div class="form-outline">
                                  <input type="text" id="form3Examplev3" class="form-control form-control-lg" />
                                  <label class="form-label" for="form3Examplev3">Last name</label>
                                </div>
      
                              </div>
                            </div>
      
                            <div class="mb-4 pb-2">
                              <select class="select">
                                <option value="1">Position</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                                <option value="4">Four</option>
                              </select>
                            </div>
      
                            <div class="mb-4 pb-2">
                              <div class="form-outline">
                                <input type="text" id="form3Examplev4" class="form-control form-control-lg" />
                                <label class="form-label" for="form3Examplev4">Position</label>
                              </div>
                            </div>
      
                            <div class="row">
                              <div class="col-md-6 mb-4 pb-2 mb-md-0 pb-md-0">
      
                                <div class="form-outline">
                                  <input type="text" id="form3Examplev5" class="form-control form-control-lg" />
                                  <label class="form-label" for="form3Examplev5">Bussines Arena</label>
                                </div>
      
                              </div>
                              <div class="col-md-6">
      
                                <select class="select">
                                  <option value="1">Employees</option>
                                  <option value="2">Two</option>
                                  <option value="3">Three</option>
                                  <option value="4">Four</option>
                                </select>
      
                              </div>
                            </div>
      
                          </div>
                        </div>
                        <div class="col-lg-6 bg-indigo text-white">
                          <div class="p-5">
                            <h3 class="fw-normal mb-5">Contact Details</h3>
      
                            <div class="mb-4 pb-2">
                              <div class="form-outline form-white">
                                <input type="text" id="form3Examplea2" class="form-control form-control-lg" />
                                <label class="form-label" for="form3Examplea2">Street + Nr</label>
                              </div>
                            </div>
      
                            <div class="mb-4 pb-2">
                              <div class="form-outline form-white">
                                <input type="text" id="form3Examplea3" class="form-control form-control-lg" />
                                <label class="form-label" for="form3Examplea3">Additional Information</label>
                              </div>
                            </div>
      
                            <div class="row">
                              <div class="col-md-5 mb-4 pb-2">
      
                                <div class="form-outline form-white">
                                  <input type="text" id="form3Examplea4" class="form-control form-control-lg" />
                                  <label class="form-label" for="form3Examplea4">Zip Code</label>
                                </div>
      
                              </div>
                              <div class="col-md-7 mb-4 pb-2">
      
                                <div class="form-outline form-white">
                                  <input type="text" id="form3Examplea5" class="form-control form-control-lg" />
                                  <label class="form-label" for="form3Examplea5">Place</label>
                                </div>
      
                              </div>
                            </div>
      
                            <div class="mb-4 pb-2">
                              <div class="form-outline form-white">
                                <input type="text" id="form3Examplea6" class="form-control form-control-lg" />
                                <label class="form-label" for="form3Examplea6">Country</label>
                              </div>
                            </div>
      
                            <div class="row">
                              <div class="col-md-5 mb-4 pb-2">
      
                                <div class="form-outline form-white">
                                  <input type="text" id="form3Examplea7" class="form-control form-control-lg" />
                                  <label class="form-label" for="form3Examplea7">Code +</label>
                                </div>
      
                              </div>
                              <div class="col-md-7 mb-4 pb-2">
      
                                <div class="form-outline form-white">
                                  <input type="text" id="form3Examplea8" class="form-control form-control-lg" />
                                  <label class="form-label" for="form3Examplea8">Phone Number</label>
                                </div>
      
                              </div>
                            </div>
      
                            <div class="mb-4">
                              <div class="form-outline form-white">
                                <input type="text" id="form3Examplea9" class="form-control form-control-lg" />
                                <label class="form-label" for="form3Examplea9">Your Email</label>
                              </div>
                            </div>
      
                            <div class="form-check d-flex justify-content-start mb-4 pb-3">
                              <input
                                class="form-check-input me-3"
                                type="checkbox"
                                value=""
                                id="form2Example3c"
                              />
                              <label class="form-check-label text-white" for="form2Example3">
                                I do accept the <a href="#!" class="text-white"><u>Terms and Conditions</u></a> of your site.
                              </label>
                            </div>
      
                            <button type="button" class="btn btn-light btn-lg" data-mdb-ripple-color="dark">Register</button>
      
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

          @media (min-width: 1025px) {
            .h-custom {
              height: 100vh !important;
            }
          }
          .card-registration .select-input.form-control[readonly]:not([disabled]) {
            font-size: 1rem;
            line-height: 2.15;
            padding-left: .75em;
            padding-right: .75em;
          }
          .card-registration .select-arrow {
            top: 13px;
          }
    
          .gradient-custom-2 {
            /* fallback for old browsers */
            background: #a1c4fd;
    
            /* Chrome 10-25, Safari 5.1-6 */
            background: -webkit-linear-gradient(to right, rgba(161, 196, 253, 1), rgba(194, 233, 251, 1));
    
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            background: linear-gradient(to right, rgba(161, 196, 253, 1), rgba(194, 233, 251, 1))
          }
    
          .bg-indigo {
            background-color: #4835d4;
          }
          @media (min-width: 992px) {
            .card-registration-2 .bg-indigo {
              border-top-right-radius: 15px; 
              border-bottom-right-radius: 15px;
            }
          }
          @media (max-width: 991px) {
            .card-registration-2 .bg-indigo {
              border-bottom-left-radius: 15px; 
              border-bottom-right-radius: 15px;
            }
          }
        

Registration form #7

Create an account

Have already an account? Login here


          <section class="vh-100 bg-image" style="background-image: url('https://mdbcdn.b-cdn.net/img/Photos/new-templates/search-box/img4.jpg');">
            <div class="mask d-flex align-items-center h-100 gradient-custom-3">
              <div class="container h-100">
                <div class="row d-flex justify-content-center align-items-center h-100">
                  <div class="col-12 col-md-9 col-lg-7 col-xl-6">
                    <div class="card" style="border-radius: 15px;">
                      <div class="card-body p-5">
                        <h2 class="text-uppercase text-center mb-5">Create an account</h2>
      
                        <form>
      
                          <div class="form-outline mb-4">
                            <input type="text" id="form3Example1cg" class="form-control form-control-lg" />
                            <label class="form-label" for="form3Example1cg">Your Name</label>
                          </div>
      
                          <div class="form-outline mb-4">
                            <input type="email" id="form3Example3cg" class="form-control form-control-lg" />
                            <label class="form-label" for="form3Example3cg">Your Email</label>
                          </div>
      
                          <div class="form-outline mb-4">
                            <input type="password" id="form3Example4cg" class="form-control form-control-lg" />
                            <label class="form-label" for="form3Example4cg">Password</label>
                          </div>
      
                          <div class="form-outline mb-4">
                            <input type="password" id="form3Example4cdg" class="form-control form-control-lg" />
                            <label class="form-label" for="form3Example4cdg">Repeat your password</label>
                          </div>
        
                          <div class="form-check d-flex justify-content-center mb-5">
                            <input
                              class="form-check-input me-2"
                              type="checkbox"
                              value=""
                              id="form2Example3cg"
                            />
                            <label class="form-check-label" for="form2Example3g">
                              I agree all statements in <a href="#!" class="text-body"><u>Terms of service</u></a>
                            </label>
                          </div>
        
                          <div class="d-flex justify-content-center">
                            <button type="button" class="btn btn-success btn-block btn-lg gradient-custom-4 text-body">Register</button>
                          </div>
      
                          <p class="text-center text-muted mt-5 mb-0">Have already an account? <a href="#!" class="fw-bold text-body"><u>Login here</u></a></p>
        
                        </form>
      
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

          .gradient-custom-3 {
            /* fallback for old browsers */
            background: #84fab0;
    
            /* Chrome 10-25, Safari 5.1-6 */
            background: -webkit-linear-gradient(to right, rgba(132, 250, 176, 0.5), rgba(143, 211, 244, 0.5));
    
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            background: linear-gradient(to right, rgba(132, 250, 176, 0.5), rgba(143, 211, 244, 0.5))
          }
          .gradient-custom-4 {
            /* fallback for old browsers */
            background: #84fab0;
    
            /* Chrome 10-25, Safari 5.1-6 */
            background: -webkit-linear-gradient(to right, rgba(132, 250, 176, 1), rgba(143, 211, 244, 1));
    
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            background: linear-gradient(to right, rgba(132, 250, 176, 1), rgba(143, 211, 244, 1))
          }