使表格适合屏幕引导程序

Question

I have a background, but im also trying to get my form to just fit on the screen so it's not going past the screen.

Here is the code for the background image

  <style>
body, html {
    height: 100%;
    margin: 0;
}

.bg {
    /* The image used */
    background-image: url("https://i.imgur.com/qnxtJse.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

Here is the code for the form. You can vist https://drivealongapp.com/dashboard/page-register.php

And see what I'm talking about. I want it to just be in the image area. and not go past it.

<!-- Main wrapper  -->

<div id="main-wrapper">

    <div class="unix-login">

        <div class="container-fluid">

            <div class="row justify-content-center">

                <div class="col-lg-4">

                    <div class="login-content card">

                         <center><h3>Register Account</h3>

                        <p><strong>Create Account</strong> » Purchase » Begin</p></center>

                        <div class="login-form">

                            <form data-toggle="validator" method="post" id="register_form">

                                <div class="form-group">

                                    <label>Name</label>

                                    <input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required>

                                </div>

                                <div class="form-group">

                                    <label>Age</label>

                                    <input type="dob" id="age" name="age"class="form-control" placeholder="03/26/2001" required></div>

                                <div class="form-group">

                                    <label>Email address</label>

                                    <input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required>

                                    <div class="help-block with-errors"></div>

                                </div>

                                <div class="form-group">

                                    <label>Password</label>

                                    <input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required>

                                    <div class="help-block"></div>

                                </div>

                                <div class="form-group">

                                    <label>Choose Your Course</label>

                                    <select name="course" class="form-control">

                                        <option value="0" selected>Texas Parent Taught Drivers Ed</option>

                                        <option value="1">Texas Instructor Taught Drivers Ed</option>

                                        <option value="2">Texas Adult Drivers Ed</option>

                                    </select>

                                </div>

                                <div class="form-group">

                                    <label>Referral</label>

                                    <input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>">

                                </div>

                                <div class="form-group checkbox">

                                    <label>

                                    <input id="policy" type="checkbox" data-error="Don't you agree?" required> Agree the terms and Privacy Policy

                                    </label>

                                    <div class="help-block with-errors"></div>

                                </div>

                                <button name="register" type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30" >Register</button>

                                <div class="register-link m-t-15 text-center">

                                    <p>Already have account? <a href="page-login.php?refer=<?php echo $refer?>"> Sign in</a></p>

                                </div>

                            </form>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>



</div>

I'm aiming for something like this:

Answer 1

I just removed all the labels. If you want to change something else let me know

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <!-- Main wrapper --> <div id="main-wrapper"> <div class="unix-login"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-lg-4"> <div class="login-content card"> <center> <h3>Register Account</h3> <p><strong>Create Account</strong> » Purchase » Begin</p> </center> <div class="login-form"> <form data-toggle="validator" method="post" id="register_form"> <div class="form-group"> <input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required> </div> <div class="form-group"> <input type="dob" id="age" name="age" class="form-control" placeholder="AGE (03/26/2001)" required></div> <div class="form-group"> <input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required> <div class="help-block with-errors"></div> </div> <div class="form-group"> <input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required> <div class="help-block"></div> </div> <div class="form-group"> <select name="course" class="form-control"> <option value="0" selected>CHOOSE COURSE</option> <option value="1" selected>Texas Parent Taught Drivers Ed</option> <option value="2">Texas Instructor Taught Drivers Ed</option> <option value="3">Texas Adult Drivers Ed</option> </select> </div> <div class="form-group"> <input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>"> </div> <div class="form-group checkbox"> <label> <input id="policy" type="checkbox" data-error="Don't you agree?" required> Agree the terms and Privacy Policy </label> <div class="help-block with-errors"></div> </div> <button name="register" type="submit" class="btn btn-primary btn-flat mb-30 mt-30">Register</button> <div class="register-link mt-15 text-center"> <p>Already have account? <a href="page-login.php?refer=<?php echo $refer?>"> Sign in</a></p> </div> </form> </div> </div> </div> </div> </div>