Bootstrap 5 - Unwanted white space at the bottom-CodePudding

I have adopted Bootstrap 5 fixed navbar example in my site but after spending hours researching I'm yet unable to remove the white space at the bottom. Please see Bootstrap 5 link, and notice the bottom white space underneath the card. https://getbootstrap.com/docs/5.1/examples/navbar-fixed/

My site has the same white space whenever the page is "brief", whereas for long pages obviously it does not appear.

I have tried overriding via my custom css file with the below but this yielded no results. I know this sheet does get picked up because I'm using for other stuff.


html, body, footer {
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;

}


footer.well{
  margin-bottom: -20px !important;
}

Can anyone please shed some light as to how I can remove this white space?

Here's the code from said site:


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Fixed top navbar example · Bootstrap v5.1</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/navbar-fixed/">

    

    <!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

    
    <!-- Custom styles for this template -->
    <link href="navbar-top-fixed.css" rel="stylesheet">
  </head>
  <body>
    
<nav >
  <div >
    <a  href="#">Fixed navbar</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarCollapse">
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a >Disabled</a>
        </li>
      </ul>
      <form >
        <input  type="search" placeholder="Search" aria-label="Search">
        <button  type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<main >
  <div >
    <h1>Navbar example</h1>
    <p >This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
    <a  href="/docs/5.1/components/navbar/" role="button">View navbar docs &raquo;</a>
  </div>
</main>


    <script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

      
  </body>
</html>

CodePudding user response：

If you've just copied in its entirety the example site you linked to, that has a stylesheet called 'navbar-top-fixed.css' with the following rule

body {
    min-height: 75rem;
    padding-top: 4.5rem;
}

As you can see, it has a min-height rule of 75rem. Its designed to showcase the fact that the navbar is sticking to the top when the content overflows by forcing the content to be very tall. It is not intended this would be used in actual code. If you've copied that stylesheet onto your site, you just need to remove the min-height rule (the padding rule is still important if you want the navbar as this stops the content from appearing underneath your navbar)