Bootstrap HTML Responsive Online School Management Registration Form

Bootstrap HTML Responsive Online School Management Registration Form

Welcome to another tutorial of Web-design in StorialTech.This tutorial we make a nice "Responsive Online School Management Registration Form" using HTML5 and Bootstrap4.First of all we need to create a index.html file.after creating the file we need to open it in our editor and follow this coding instruction.. and must should be linked bootstrap <link rel="stylesheet" href="css/bootstrap.css">.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Signup form</title>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.css">
  <style>
  .row input[type=text]{
      border-radius:0;
  }
  .row input[type=number]{
      border-radius:0;
  }
  .row input[type=date]{
      border-radius:0;
  }
  .row select{
      border-radius:0;
  }
  .row textarea{
      border-radius:0;
  }
</style>
</head>
<body>
<div class="container jumbotron">
    <h3 class="text text-center" style="margin-bottom:20px;">Resistration Form For Online School Management System</h3>
    <div class="row">
        <div class="col-md-6">
            <label class="text text-secondary">Student Name :</label>
            <div class="input-group input-group-md mb-3">
                <input type="text" class="form-control" placeholder="Enter Institute Name">
            </div>
        </div>
        <div class="col-md-6">
            <label class="text text-secondary">Department :</label>
            <div class="input-group input-group-md mb-3">
                <select class="form-control">
                     <option>Diploma 1st sem</option>
                     <option>Diploma 2nd sem</option>
                     <option>Diploma 3rd sem</option>
                     <option>Diploma 4th sem</option>
                     <option>Diploma 5th sem</option>
                     <option>Diploma 7th sem</option>
                     <option>Diploma 8th sem</option>
                     <option>HSC</option>
                     <option>Eleven</option>
                     <option>SSC</option>
                     <option>Nine</option>
                 </select>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <label class="text text-secondary">Father Name :</label>
            <div class="input-group input-group-md mb-3">
                <input type="text" class="form-control" placeholder="Enter Your Father Name">
            </div>
        </div>
        <div class="col-md-6">
            <label class="text text-secondary">Mobile :</label>
            <div class="input-group input-group-md mb-3">
                <input type="text" class="form-control" placeholder="Parent Phone Number">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <label class="text text-secondary">Roll :</label>
            <div class="input-group input-group-md mb-3">
                <input type="text" class="form-control" placeholder="12345678">
            </div>
        </div>
        <div class="col-md-6">
            <label class="text text-secondary">Registration no.:</label>
            <div class="input-group input-group-md mb-3">
                <input type="text" class="form-control" placeholder="12345678">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <label class="text text-secondary">Date of Birth :</label>
            <div class="input-group input-group-md mb-3">
                <input type="date" class="form-control">
            </div>
        </div>
        <div class="col-md-6">
            <label class="text text-secondary">Student Phone :</label>
            <div class="input-group input-group-md mb-3">
                <input type="number" class="form-control" placeholder="Student Phone Number">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label class="text text-secondary">Date of Established :</label>
            <div class="input-group input-group-md mb-3">
                <input type="date" class="form-control" placeholder="Exapmle(12-12-2012)">
            </div>
        </div>
        <div class="col-md-4">
            <label class="text text-secondary">Board :</label>
            <div class="input-group input-group-md mb-3">
                <select class="form-control" placeholder="Select Board">
                    <option>Select Board</option>
                    <option>Dhaka Board</option>
                    <option>Sylhet Board</option>
                    <option>Comilla Board</option>
                    <option>Rungpur Board</option>
                    <option>Chittagong Board</option>
                    <option>Khulna Board</option>
                    <option>Barisal Board</option>
                </select>
            </div>
        </div>
        <div class="col-md-4">
            <label class="text text-secondary">Division :</label>
            <div class="input-group input-group-md mb-3">
                <select class="form-control" placeholder="Select Board">
                    <option>Select Division</option>
                    <option>Dhaka Division</option>
                    <option>Sylhet Division</option>
                    <option>Comilla Division</option>
                    <option>Rungpur Division</option>
                    <option>Chittagong Division</option>
                    <option>Khulna Division</option>
                    <option>Barisal Division</option>
                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label class="text text-secondary">Institute Code :</label>
            <div class="input-group input-group-md mb-3">
                <input type="text" class="form-control" placeholder="Enter Institute Code">
            </div>
        </div>
        <div class="col-md-4">
            <label class="text text-secondary">Institute EIN :</label>
            <div class="input-group input-group-md mb-3">
                <input type="text" class="form-control" placeholder="Enter Institute EIN Number">
            </div>
        </div>
        <div class="col-md-4">
            <label class="text text-secondary">Institute Type :</label>
            <div class="input-group input-group-md mb-3">
                <input type="text" class="form-control" placeholder="What is the type of Institute?">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label class="text text-secondary">District :</label>
            <div class="input-group input-group-md mb-3">
                <input type="text" class="form-control" placeholder="Enter District Name">
            </div>
        </div>
        <div class="col-md-2">
            <label class="text text-secondary">District Code :</label>
            <div class="input-group input-group-md mb-3">
                <input type="number" class="form-control" placeholder="1234">
            </div>
        </div>
        <div class="col-md-4">
            <label class="text text-secondary">Post Office :</label>
            <div class="input-group input-group-md mb-3">
                <input type="text" class="form-control" placeholder=" Enter Post Name">
            </div>
        </div>
        <div class="col-md-2">
            <label class="text text-secondary">Post Code :</label>
            <div class="input-group input-group-md mb-3">
                <input type="number" class="form-control" placeholder="1234">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label class="text text-secondary">Thana/Upazila :</label>
            <div class="input-group input-group-md mb-3">
                <input type="text" class="form-control" placeholder="Enter Name Thana/Upazila">
            </div>
        </div>
        <div class="col-md-8">
            <label class="text text-secondary">Total Student :</label>
            <div class="input-group input-group-md mb-3">
                <input type="number" class="form-control" placeholder="Enter Your Total Student Number ">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <label class="text text-secondary">Discribe :</label>
            <div class="input-group input-group-md mb-3">
                <textarea type="number" class="form-control" placeholder="Discription of Institute"></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h5 class="text text-danger ">Institute Logo :</h5>
            <div class="input-group input-group-md mb-3">
                <input type="file" class="form-control-file" placeholder="Enter Name Thana/Upazila">
            </div>
        </div>
        <div class="col-md-4">
            <h5 class="text text-danger">Institute Photo :</h5>
            <div class="input-group input-group-md mb-3">
                <input type="file" class="form-control-file" placeholder="Enter Your Total Student Number ">
            </div>
        </div>
        <div class="col-md-4">
            <h5 class="text text-danger ">Admin Photo :</h5>
            <div class="input-group input-group-md mb-3">
                <input type="file" class="form-control-file" placeholder="Enter Your Total Student Number ">
            </div>
        </div>
    </div>
    <div class="row" style="margin-top:20px;">
        <div class="col-md-4">
            <h4><a href="#" class="text text-primary">Login</a></h4>
        </div>
        <div class="col-md-4">
            <button type="button" class="btn btn-primary btn-block">Resister</button>
        </div>
        <div class="col-md-4">
            <h4 style="float:right;"><a href="#" class="text text-primary">Need Help?</a></h4>
        </div>
    </div>
</div>
</body>
</html>

0 Comments Here
Authentication required

You must log in to post a comment.

Log in
Related Post
StorialTechBootstrap 5 | New Update of Bootstrap
Bootstrap 5 | New Update of Bootstrap

Bootstrap হলো সবচেয়ে বড় এবং জনপ্রিয় Front-end-FrameworkBootstrap তাদের নতুন ভার্সন পাবলিশ করেছে এবং ভার্সনটির নাম..


StorialTech3D Cube Image
3D Cube Image

Welcome to another tutorial of Web-design in StorialTech.This tutorial we make a nice 3D cube image..


StorialTech3D Animated Image with Html and Css Code Part 1
3D Animated Image with Html and Css Code Part 1

Every web designer's need to know many feature design for his skill and website. Now we..