Bootstrap: Make height of div 100% despite navbar (in order to center text)

August 13, 2022

I’m using Bootstrap 5. I’m trying to get the text in the middle of the page vertically centered. In order to do that, I needed to get the container of the div to take up 100% of the page. I tried using h-100 to do that, but due to the navbar taking up some height, it caused an overflow. I just want the div with the text in it to take up the remaining vertical height, or somehow center the text without needing to do 100% height.

I’m not using any user-defined CSS except for some color & font customizations.

<!doctype html>
<html lang="en" class="h-100">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="./css/overrides.css" rel="stylesheet">
    <link href="./css/colors.css" rel="stylesheet">
    <link rel="icon" href="./images/favicon.png">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class="h-100" style="background:url('./images/test_bg.jpeg'); background-repeat: no-repeat; background-size:fit;">
    <nav class="navbar navbar-expand-lg sticky-top mt-auto">
        <div class="mx-auto text-center">
            <a class="navbar-brand" href="#"><img src="./images/logo_desktop.png" width="200"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="h-100 container-fluid my-auto d-flex align-items-center justify-content-center classes">
        <div class="row text-light">
            <div class="col-md-12 col-sm-12 text-center">
                <h1 class="display-1">IF YOU CAN THINK IT,<br />WE CAN MAKE IT.</h1>
            </div>
        </div>
    </div>
</body>

</html>

>Solution :

Use fixed-top instead of sticky-top. The difference is between being in the flow of the document or out of it.

Edit: on mobile you’d still want it to be sticky probably. So use a media query to distinguish the position.

<!doctype html>
<html lang="en" class="h-100">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="./css/overrides.css" rel="stylesheet">
  <link href="./css/colors.css" rel="stylesheet">
  <link rel="icon" href="./images/favicon.png">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">


</head>

<body class="h-100" style="background:url('./images/test_bg.jpeg'); background-repeat: no-repeat; background-size:fit;">
  <nav class="navbar navbar-expand-lg fixed-top mt-auto">
    <div class="mx-auto text-center">
      <a class="navbar-brand" href="#"><img src="./images/logo_desktop.png" width="200"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="h-100 container-fluid my-auto d-flex align-items-center justify-content-center classes">
    <div class="row text-light">
      <div class="col-md-12 col-sm-12 text-center">
        <h1 class="display-1">IF YOU CAN THINK IT,<br />WE CAN MAKE IT.</h1>
      </div>
    </div>
  </div>
</body>

</html>