Search code examples
htmlcssbootstrap-5responsive

Removing vertical scroll from a page using bootstrap 5 responsive design

I am converting a Figma design to an HTML page and using Bootstrap 5. Here's how the Figma design looks:

enter image description here

The issue is that I am getting a vertical scroll bar on the page. The following highlighted space in the red box is causing it.

enter image description here

The image height inside the col div does not force it to vertically overflow. How is the column height being set?

enter image description here

I have tried setting the height of the image div, but then it makes the image height really small. I do not want to change the height of the class manually. What I want to know is how is the div height being set when I am using responsive row/col classes.

Here's the code I've done:

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
body {
  font-family: "Poppins", sans-serif;
  h4 {
    font-weight: 600;
  }
  .left-col {
    padding-top: 200px;
  }
  input[type="text"] {
    background-color: #f0efff;
    height: 62px;
  }
  input[type="text"]:focus {
    background-color: #f0efff;
    border-radius: 10%;
  }
  input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #a7a3ff !important;
    font-size: 15px !important;
  }
  input::-moz-placeholder {
    /* Firefox 19+ */
    color: #a7a3ff !important;
    font-size: 15px !important;
  }
  input:-ms-input-placeholder {
    /* IE 10+ */
    color: #a7a3ff !important;
    font-size: 15px !important;
  }
  input:-moz-placeholder {
    /* Firefox 18- */
    color: #a7a3ff !important;
    font-size: 15px !important;
  }
  a {
    font-size: 13px;
  }
  .continue-with {
    font-size: 16px;
    clear: #b5b5b5;
  }
  .btn-login {
    height: 60px;
    border-radius: 10px;
  }
  .btn-round {
    border-radius: 50%;
    height: 40px;
    padding: 0;
  }
  .btn-round img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .image {
    position: relative;
    bottom: 10%;
    height: 75%;
    right: 5%;
  }
  .right-col {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .btn-primary {
    background-color: #4d47c3 !important;
  }
  .text-primary {
    color: #4d47c3 !important;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Login 1</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <link href="./login-1.css" rel="stylesheet" />
</head>

<body style="height: 100vh">
  <nav class="navbar">
    <div class="container-fluid">
      <a style="font-weight: bold" class="navbar-brand text-dark text-decoration-none" href="#">Your logo</a
        >
      </div>
    </nav>
    <div class="container px-5">
      <div class="row">
        <div class="col-md-8 left-col">
          <div class="row mb-4">
            <div class="col">
              <h1 style="font-weight: bold" class="py-2">Sign in to</h1>
              <h4 style="font-size: 35px">Lorem Ipsum is simply</h4>
            </div>
          </div>
          <div class="row py-4">
            <div class="col-md-5">
              <div class="pt-2" style="font-size: 16px">
                If you don’t have an account register.<br />
                You can
                <span class="text-primary" style="font-weight: bold"
                  >Register here!</span
                >
              </div>
            </div>
            <div class="col-md-7">
              <img
                src="https://raw.githubusercontent.com/jaslam94/figma-exercises/main/login-1/assets/images/saly-14.png"
                alt="image"
                class="image"
              />
            </div>
          </div>
        </div>
        <div class="col-md-4 right-col">
          <h4 class="mb-4">Sign in</h4>
          <form>
            <div class="mb-4">
              <input
                class="form-control px-3 border-0"
                type="text"
                name="Email"
                placeholder="Enter email or user name"
              />
            </div>

            <div class="mb-2">
              <input
                class="form-control px-3 mb-2 border-0"
                type="text"
                name="Password"
                placeholder="Password"
              />
              <a
                href="#"
                class="text-decoration-none form-text float-end"
                style="color: #b5b5b5"
                >Forgot Password?</a
              >
            </div>

            <div class="d-grid gap-2 mt-5">
              <input
                type="submit"
                value="Login"
                class="btn btn-primary btn-login shadow-lg"
              />
            </div>
          </form>
          <div class="form-text continue-with text-center py-5">
            or continue with
          </div>
          <div class="row justify-content-center">
            <div class="col-auto p-1">
              <a href="#" class="btn btn-round">
                <img
                  src="/login-1/assets/logos/facebook-icon.png"
                  alt="Facebook Icon"
                />
              </a>
    </div>
    <div class="col-auto p-1">
      <a href="#" class="btn btn-round">
        <img src="/login-1/assets/logos/apple-icon.png" alt="Apple Icon" />
      </a>
    </div>
    <div class="col-auto p-1">
      <a href="#" class="btn btn-round">
        <img src="/login-1/assets/logos/google-icon.png" alt="Google Icon" />
      </a>
    </div>
    </div>
    </div>
    </div>
    </div>
</body>

</html>

Check on CodePen: https://codepen.io/junaidaslam/pen/WNYRRzK?editors=1100

Solution 
  • Try the following.
<div class="container px-5">
   <div class="row justify-content-around align-items-center" style="
      height: 90vh;
      ">
      <div class="col-md-8 left-col">
         <div class="mb-4">
            <h1 style="font-weight: bold;" class="py-2">Sign in to</h1>
            <h4 style="font-size: 35px;">Lorem Ipsum is simply</h4>
         </div>
         <div class="d-flex py-4">
            <div class="pt-2" style="font-size: 16px;">
               If you don’t have an account register.<br>
               You can
               <span class="text-primary" style="font-weight: bold;">Register here!</span>
            </div>
            <div>
               <img src="/assets/images/saly-14.png" alt="image" class="" style="
                  position: absolute;
                  top: 395px;
                  width: 15%;
                  ">
            </div>
         </div>
      </div>
      <div class="col-md-4 right-col">
         <h4 class="mb-4">Sign in</h4>
         <form>
            <div class="mb-4 form-group">
               <input class="form-control px-3 border-0" type="text" name="Email" placeholder="Enter email or user name">
            </div>
            <div class="mb-3 form-group">
               <input class="form-control px-3 border-0" type="text" name="Password" placeholder="Password">
            </div>
            <div class="mb-5 form-group text-end"><a href="#" class="text-decoration-none ">Forgot Password?</a></div>
            <div class="form-group">
               <input type="submit" value="Login" class="btn btn-primary btn-login w-100">
            </div>
         </form>
         <div class="form-text continue-with text-center py-5">
            or continue with
         </div>
         <div class="row justify-content-center">
            <div class="col-auto p-1">
               <a href="#" class="btn btn-round">
               <img src="/assets/logos/facebook-icon.png" alt="Facebook Icon">
               </a>
            </div>
            <div class="col-auto p-1">
               <a href="#" class="btn btn-round">
               <img src="/assets/logos/apple-icon.png" alt="Apple Icon">
               </a>
            </div>
            <div class="col-auto p-1">
               <a href="#" class="btn btn-round">
               <img src="/assets/logos/google-icon.png" alt="Google Icon">
               </a>
            </div>
         </div>
      </div>
   </div>
</div>