how to vertically align unordered list in bootstrap 4-CodePudding

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

CodePudding user response：

I think this is your desired answer.
Use d-block and d-md-inline-block to change display property of list items.
And use md breakpoint for spacing.
I used mr-md-2 for d-md-inline-block.

.numberCircle {
    border-radius: 50%;
    width: 37px;
    height: 36px;
    padding: 8px;
    
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    
    font: 15px Arial, sans-serif;
    font-weight: 600;
}
.numberCircle:hover {
    background-color: #8898aa;
    color: #fff;
    border: 2px solid #8898aa;
    cursor: pointer;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>

<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="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 labels"><span class="text-muted">about to quit</span></li>
                        <li id="number_0" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>1</span></li>
                        <li id="number_1" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>2</span></li>
                        <li id="number_2" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>3</span></li>
                        <li id="number_3" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>4</span></li>
                        <li id="number_4" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>5</span></li>
                        <li id="number_5" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>6</span></li>
                        <li id="number_6" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>7</span></li>
                        <li id="number_7" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>8</span></li>
                        <li id="number_8" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>9</span></li>
                        <li id="number_9" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>10</span></li>
                        <li class="d-block d-md-inline-block 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>
    </div>
</div>