How to properly implement left side menu (navbar) on bootstrap 4?

Question

css

Hello. I'm starting to learn the 4th version of bootstrap. It is not clear how to correctly implement, like a toaster, a vertical menu on the left on large screens and a menu at the top on small ones.
Everything is simple with the horizontal one, the description of the horizontal one is enough in the documentation. On the vertical I found only:

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

Even if you insert this code, how to properly connect the horizontal navbar block on small screens?
In the 3rd bootstrap, I wrote a block there with widht: 15%, float: left, position: fixed , etc. And displayed it with visible-lg on large screens. And on small screens, a navbar block with a "burger" already appeared using the class: hidden-lg ..
Now I don’t find these adaptability classes at all ..

Answer 1

I do not know how correct, but I found such a solution.

<div class="container-fluid">
      <div class="row">
        <header class="col-md-3">
          <nav class="sidebar-sticky bg-dark navbar-dark navbar-expand-md">
            <a href="#" class="logo navbar-brand">Logo</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto flex-column">
                <li class="nav-item active">
                  <a href="" class="nav-link">О нас</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link">Проекты</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link">Команда</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link">Отзывы</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link">Контакты</a>
                </li>
              </ul>
            </div>
          </nav>
        </header>
        <!-- end header -->

        <main class="col-md-9">
          <h1>Привет, это сайт!</h1>
        </main>
        <!-- end main -->
      </div>
    </div>

Perhaps this is Crutches, but it was not possible to find alternatives.

Answer 2

Guys everything is easier
https://codepen.io/Serhii75/pen/OEQrgM