Как мне вертикально центрировать строку в столбце с bootstrap?

Question

Я пытаюсь выровнять мою кнопку по вертикали внутри ее столбца. Но высота столбца не увеличивается до 100% от его родительской строки (границы только там, чтобы показать высоту столбца). Как я могу это исправить?

Вот URL: https://skydocker.searchlightpro.us/main/userList

Answer 1

h-100 во внешней строке, содержащей первичные столбцы, приведет к расширению строки до 100% родительского контейнера, верно?

Тем не менее, вот соответствующий код - мне любопытно об этом тоже:

<div class="container">
   <div class="row border mt-2 ">
      <div class="col-sm-2 h-100">
         <img class="rounded-circle mx-auto align-self-center" src="Airy.png" alt="Avatar" width="140px">
      </div>
      <div class="col-sm-10 h-100">
         <div class="row border align-items-center h-100">
            <div class="col-sm-9">
               <h5 class="mt-0">AKeoshiiProject</h5>
               <h6 class="font-italic">Keoshii Dex</h6>
               <p class="text-muted">Just here for the art.</p>
            </div>
            <div class="col-sm-3">
               <div class="my-auto">
                  <a href="https://AKeoshiiProject.searchlightpro.us" class="btn btn-primary">Go to their page!</a>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>