<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header> <h2>Student Registration</h2> </header> <main> <div class="container shadow mt-5 p-3 "> <h3><span class="badge badge-primary mt-1">Student Registration Form</span></h3> <form action="/action_page.php" class="needs-validation" novalidate> <div class="form-row mx-3"> <div class="col-md-6 mb-3 font-weight-bold"> <label for="fname" class="required">First Name</label> <input type="text" class="form-control" id="fname" placeholder="Enter Firstname" name="fname" required> <div class="invalid-feedback">First name is required.</div> </div> <div class="col-md-6 mb-3 font-weight-bold"> <label for="lname" class="required">Last Name</label> <input type="text" class="form-control" id="lname" placeholder="Enter Lastname" name="lname" required> <div class="invalid-feedback">Last name is required.</div> </div> <div class="col-md-6 mb-3 font-weight-bold"> <label for="pwd" class="required">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter Password" name="pwd" required> <div class="invalid-feedback">Password is required.</div> </div> <div class="col-md-6 mb-3 font-weight-bold"> <label for="cpwd" class="required">Confirm Password:</label> <input type="password" class="form-control" id="cpwd" placeholder="Enter Confirm Password" name="cswd" required> <div class="invalid-feedback">Confirm password is required.</div> </div> <div class="col-md-6 mb-3 font-weight-bold"> <label for="pclass" class="required">Present Class</label> <input type="number" class="form-control" id="pclass" placeholder="Enter Present Class Name" name="pclass" required> <div class="invalid-feedback">Present class is required.</div> </div> <div class="col-md-6 mb-3 font-weight-bold"> <label for="pschool" class="required">Present School</label> <input type="text" class="form-control" id="pschool" placeholder="Enter Present School Name" name="pschool" required> <div class="invalid-feedback">School name is required.</div> </div> <div class="col-md-6 mb-3 font-weight-bold"> <label for="mob" class="required">Guardian Mob No./Whatsapp No.</label> <input type="number" class="form-control" id="mob" placeholder="Enter Guardian Mobile Number or, Whatsapp No." name="mob" required> <div class="invalid-feedback">Guardian Mob No./Whatsapp No. is required.</div> </div> <div class="col-md-6 mb-3 font-weight-bold"> <label for="address" class="required">Home Address</label> <input type="text" class="form-control" id="address" placeholder="Enter Home Address" name="address" required> <div class="invalid-feedback">Home address is required.</div> </div> <div class="col-md-6 mb-3 form-group font-weight-bold form-check ml-2 pl-3"> <label class="form-check-label"> <input class="form-check-input " type="checkbox" name="remember" required> By clicking here, I hereby declare that the above given information are true to the best of my knowledge. <span class="required"></span> <div class="invalid-feedback">Check this checkbox to continue.</div> </label> </div> </div> <center> <button type="submit" class="btn btn-success" name="submit">CLICK HERE TO REGISTER NOW</button> </center> </form> </div> </main> <footer class="mt-5"> Design & Developed By <a class="text-primary" href="https://nandysagar.in/"> Sagar Nandy.</a> </footer>

*{ margin: 0; padding: 0; box-sizing: border-box; } header{ position: fixed-top; background-color:rgb(213, 244, 244); padding: 15px; } h2{ color: rgb(15, 15, 144); text-align: center; } .container{ background-color:rgb(225, 247, 252); border-radius: 30px; } h3{ text-align: center; } footer{ position: relative; bottom: 0; left: 0; width:100%; background-color:rgb(213, 244, 244); line-height:18px; font-weight: 600; color: rgb(156, 16, 16); text-align: center; padding: 10px; } section{ margin-top: 2rem; } .text-area{ display: flex; align-items: center; justify-content: center; } textarea{ width:620px; height:80px; resize:none; padding: 10px; } h3{ margin-bottom: 15px ; color: rgb(240, 10, 121); font-size: 25px; } body::-webkit-scrollbar { width:12px; } body::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); border-radius: 10px; } body::-webkit-scrollbar-thumb { background-color: darkgrey; border-radius: 10px; } .required:after { content:" *"; color: red; }