How to properly use bootstrap grid?-CodePudding

I'm trying to create a log in page using bootstrap. I have created 2 div with each having col-lg-5 and col-lg-7. I'm trying to place a image at the left side div and login form at the right side div. But what I get is col-lg-5 at top and col-lg-7 always at bottom in any screen resolution. Can some one help me to identify what I'm doing wrong here.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
      <section >
        <div >
          <div >
            <div >

              <div >
                <img src="./images/login2.png"   alt="">
              </div>

              <div >
                <form action="">
                  <div >
                    <div >
                      <input type="email" placeholder="Email-Address" >
                    </div>
                  </div>

                  <div >
                    <div >
                      <input type="passsword" placeholder="******" >
                    </div>
                  </div>

                  <div >
                    <div >
                      <button type="button" >Login</button>
                    </div>
                  </div>
                  
                  <a href="#">Forgot Password</a>
                  <p>Don't have a account yet? <a href="#">Register here</a></p>
                </form>
              </div>
              
            </div>
          </div>
        </div>
      </section>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

CodePudding user response：

You have an incorrect nesting of row and cols. Please read up how the grid system of bootstrap works. It is essential to understand how the classes need to be nested to achieve a working row / column relationship.

To keep it short: Cols should always be nested directly under rows to get the best result.

In your example you have your col-5 and col-7 nested under a single col element. Remove this element and it should work as expected

Another hint, your input fields are all missing some labels. You are misusing the placeholder attribute as a label, this is wrong.

<div >
  <div > </div>
  <div > </div>
</div>