CODEWITHSUNDEEP
htmlcssbootstrap-4
lakshitha dilhan
lakshitha dilhan

Reputation: 85

How to properly use bootstrap grid?

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 class="Form my-4 mx-5">
        <div class="container">
          <div class="row">
            <div class="col">

              <div class="col-lg-5">
                <img src="./images/login2.png"   alt="">
              </div>

              <div class="col-lg-7">
                <form action="">
                  <div class="form-row">
                    <div class="col-lg-7">
                      <input type="email" placeholder="Email-Address" class="form-control">
                    </div>
                  </div>

                  <div class="form-row">
                    <div class="col-lg-7">
                      <input type="passsword" placeholder="******" class="form-control">
                    </div>
                  </div>

                  <div class="form-row">
                    <div class="col-lg-7">
                      <button type="button" class="btn1">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>

enter image description here

Upvotes: 0

Views: 119

Answers (1)

cloned
cloned

Reputation: 6742

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 class="row">
  <div class="col-lg-5"> </div>
  <div class="col-lg-7"> </div>
</div>

Upvotes: 3

Related Questions