Remove the space gap between the header and card in Bootstrap

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!

Answer №1

To update your HTML code, remove the min-vh-100 class from the div and instead apply margin and padding to the form through CSS. Here's an example:

.card {
  margin: 10px;
}

Your updated code may look like this:

<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 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>

.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;
}

// set margin and padding 
.card {
  margin: 10px;
}


Answer №2

The root cause of the issue lies within the following class: min-vh-100

Without more context on your objective, my suggestion would be to utilize margin for better spacing at the top.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to set up datetimepicker with varying date ranges for several input fields

I am having trouble getting a new date range for each text box in my form. It seems to only return the date range from the last textbox, even though I have made the textbox IDs dynamic. I have both start and end dates for each textbox and I have calculated ...

Using JavaScript to manipulate an HTML canvas

I currently have an index.hTML file that is set up to display a canvas using the following code: <body> <canvas> </canvas> <script src="./JS/index.js" type="module"></script> </body> Within my JavaScript fi ...

Having trouble navigating to the bottom of a VUEJS app?

I've been working on developing a chatbot app that utilizes a REST API to stream content. While the functionality of the app is running smoothly, I have encountered an issue with the scroll to bottom feature. Instead of automatically scrolling to disp ...

What is the process of Defining an Element Based on Two Attributes in C#?

Is it feasible to specify a web page element based on two attributes? For example, I can locate the element by its innertext Element imagePage = ActiveBrowser.Find.ByContent(pageNumbers[p],FindContentType.InnerText); Alternatively, I can identify an ele ...

Deciding on pixel values, percentages, and sizing elements within CSS styles

For all you web development experts out there, I have a question regarding CSS styles. I often see precise pixel or percentage measurements used for properties like "padding" and "height." Experienced developers seem to effortlessly position their content ...

ensuring the footer is correctly aligned

<div id="footer"> <div class="row"> <div class="span5"> <img src="../goyal/webdesign.jpg" class="verisign-image"></div> I am a <select style="width:10%;" class="dro ...

"Troubleshooting: Issue with ng-click in AngularJS not triggering ng-show

I can't figure out why my ng-click isn't showing the ng-show message. I've tried searching for a solution but no luck. Here is my controller function: $scope.showLogoutMessage = function() { $scope.logoutmsg = true; }; This is my Logi ...

Is there a way to have incoming messages automatically align to the left or right based on the sender, without using the float property?

I am currently working on a webpage where I want the messages sent by different users to appear in a yellow conversation window based on who sent them - user 1 or user 2. I want it to mimic the messaging layout commonly seen on phones, distinguishing betwe ...

Reusing Form HTML Elements Based on Conditions

Here's a scenario where depending on the value of the $mode variable, either 'page' or 'popup' will be returned by a conditional. This choice will determine which HTML markup is displayed. Both scenarios contain a form element wit ...

Tips for aligning a search bar to the right position

How can I align the search bar to the right? I've attempted various methods but nothing seems to be working. I would like the 'Transaction' title to be on the left side of the card and the search bar on the right side. This is the code snip ...

"Combining JSON, JavaScript, and HTML for dynamic web development

I am a junior computer programmer facing challenges with our JSON project. The objective is to store an object in local storage, but my HTML and JS code are not working as intended. It seems like nothing happens at all. Any suggestions or feedback would ...

In what way are these columns altering their layout without the use of JavaScript?

While I was searching for a solution to organize content based on screen size, I came across this website. The layout of the site changes depending on the size of the browser window. When I resize my browser or view the site on a phone, the large image at ...

Is it necessary to adjust my font stack for optimal viewing on a high DPI tablet or computer screen?

My CSS includes the following font definition: html { font-size: 95%; font-family: Arial, Helvetica, sans-serif } I want my application to display well on PC, iOS, and Android tablets. I am aware that different devices have varying resolutions. C ...

The animation in Material UI does not smoothly transition with the webkit scrollbar

I've been experimenting with CSS animations in Material UI's sx property to achieve a webkit scrollbar that eases in and out. However, instead of the desired effect, the scrollbar appears and disappears instantly. Whether I define the keyframes ...

AngularJS table with resizable columns for seamless data browsing

Most examples of expandable tables using ng-repeat feature a separate content for the expanded row, like an independent table inside the detail row. I have implemented many expandable tables using these methods, similar to the following: <tr ng-repeat ...

Leveraging HTML5's local storage functionality to save and manage a collection of list elements within `<ul>`

I need help with saving a to-do list in HTML so that it persists even after refreshing the browser. Can anyone assist me? html <!DOCTYPE html> <html> <head> <title>My To-Do List</title> <link rel="sty ...

Eliminate the gaps within CSS3 columns

I'm attempting to achieve an effect that looks like: C---------------------------------------) | Address 1 | Phone Numbers | | Address 2 | Times place is open | (---------------------------------------) However, the spacing with th ...

Tips for Creating a Fixed-Width Element

I am struggling with creating text wrapping around a box inside a full width page template on Wordpress. The plugin developer suggested wrapping the text inside a fixed width element, but I am unsure how to do this. Any assistance would be greatly apprecia ...

Guide to invoking an HTML document through PHP

I'm currently in the process of developing an administrator login page using a combination of HTML and PHP, with PHP serving various other functions as well. Once the administrator successfully logs in, I need to execute an HTML file. Below, you&apos ...

I am perplexed by the CSS property `height: auto;` which seems to be making the element taller than necessary. How exactly is

Currently, I am dealing with some HTML/CSS aspects of an already established WordPress website. It appears that there might be an issue related to the theme's CSS causing this problem, although it is not immediately apparent. Specifically, there is s ...