Creating Bootstrap 4 right side navbar height to 100%

Question

Below is my Bootstrap 4 navbar code in which I'm trying to create a right side navbar height to full 100%.

<nav class="navbar navbar-expand-sm bg-light navbar-light"
            style="width: 200px; float: right;">
  <ul class="nav flex-column">
    <li class="nav-item active">
      <a class="nav-link" href="#">Sports</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Facebook</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Youtube</a>
    </li>
  </ul>
</nav>

I have also tried height: 100%; , navbar-full to the <nav> but it's not effecting any more.

See the image:

Answer 1

I would probably not rely on Bootstrap's built-in Navbar component for this, because it's really designed around a horizontal layout structure and you're going to spend a lot of unnecessary time writing CSS to override that or applying additional class declarations to override that behavior.

If you omit that component though you can achieve very similar results with minimum effort:

.navbar-right {
  height: 100vh;
  right: 0;
  position: absolute;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<nav class="navbar-right bg-light p-3">
  <ul class="nav flex-column">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
  </ul>
</nav>

position:absolute pulls your nav out of the normal document flow, allowing you to position it wherever (right:0 moves it to the right of the browser window). The height is set to 100vh which is 100% of the viewport height.

Now this is a pretty bare-bones example. You would likely want to apply specific widths, particularly with consideration to key breakpoints. But it should get you down the right path.