I'm in the process of creating a sleek landing/login page for my web application using Bootstrap. The current layout includes a header with text and an image, followed by a login form within a card.
Looking at the image provided, it's clear that there is excess space between these two components that I'd like to remove.
You can view my HTML code for the header and form below:
<header class="bg-primary py-5 text-center">
<img src="images/logo.png" alt="logo" class="img-responsive brand" />
<div class="container px-5">
<div class="row gx-5 justify-content-center">
<div class="col-lg-6">
<div class="text-center my-5">
<h1 class="display-5 fw-bolder text-white mb-2">
Welcome Back
</h1>
<p class="lead text-white-50 mb-4">
Before checking your balance you have to sign in
</p>
</div>
</div>
</div>
</div>
</header>
<div
class="container min-vh-100 d-flex justify-content-center align-items-center"
>
<form class="card p-3 bg-light">
<div class="mb-3">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@</span>
<input
type="text"
class="form-control"
placeholder="Username"
aria-label="Username"
aria-describedby="addon-wrapping"
ref="username"
/>
</div>
</div>
<div class="mb-3">
<input
type="password"
class="form-control"
placeholder="Password"
id="password"
ref="password"
/>
</div>
<button type="button" class="btn btn-primary" @click="logIn">
Submit
</button>
<hr class="mt-3 mb-3" />
<p>Need an account? <a href="signup.html">Sign up</a></p>
</form>
</div>
In addition to the code, here are some custom CSS snippets that might be useful:
.dropdown-toggle{
margin-left: 10px;
}
.navbar-brand img {
max-width: 2.5vw;
display: block;
width: 100%;
}
.input-group-btn {
width: 10px;
}
.img-responsive {
max-width: 200px;
max-height: 400px;
}
.brand {
height: 120px;
}
If anyone knows a solution to eliminate the unnecessary spacing between the header and form, I would greatly appreciate your assistance. Thank you!