html – how to vertically align unordered list in bootstrap 4

I’m trying to vertically align the unordered list tag with bootstrap 4.
classes have been tried but not working are .justify-content-center .align-self-center

Here’s my exact code:

<div class="row">
<div class="col-xl-12">
  <div class="card">
     <div class="card-body">
        <div class="current-survey text-center">
           <h4>Question 1 of 5</h4>
           <h3 class="mt-3 mb--1">On a scale from 1 to 10, how happy are you at work?</h3>
           <!---->
        </div>
        <div class="choices mt-5">
           <ul class="list-inline text-center">
              <li class="list-inline-item labels"><span class="text-muted">about to quit</span></li>
              <li id="number_0" class="list-inline-item numberCircle"><span>1</span></li>
              <li id="number_1" class="list-inline-item numberCircle"><span>2</span></li>
              <li id="number_2" class="list-inline-item numberCircle"><span>3</span></li>
              <li id="number_3" class="list-inline-item numberCircle"><span>4</span></li>
              <li id="number_4" class="list-inline-item numberCircle"><span>5</span></li>
              <li id="number_5" class="list-inline-item numberCircle"><span>6</span></li>
              <li id="number_6" class="list-inline-item numberCircle"><span>7</span></li>
              <li id="number_7" class="list-inline-item numberCircle"><span>8</span></li>
              <li id="number_8" class="list-inline-item numberCircle"><span>9</span></li>
              <li id="number_9" class="list-inline-item numberCircle"><span>10</span></li>
              <li class="list-inline-item labels"><span class="text-muted">jumping with joy</span></li>
           </ul>
        </div>
        <!----> <!----> <!----> <!----> <!----> 
        <div class="row justify-content-center mt-3"><span class="text-muted skip" style="cursor: pointer;">Skip this question</span></div>
     </div>
  </div>

And this is a sample of tags unordered list that I wanted to vertically align and make responsive as screen size goes smaller.
click this link to show sample

The class list-inline-item numberCircle` is what I wanted to align vertically.

This is the result of the small screen. Basically, I would like it to vertically re-align on a small viewport. broken on smaller viewport