ブートストラップを使ってdiv内にテキストを配置する

Question

ブートストラップとそのグリッドシステムに慣れようとしています。以下はフッターを作成しようとした私の試みを示していますが、12列すべてを使用するのは好きではありませんが、現時点ではうまくいきますが、何らかの理由でdiv内にリスト項目を集中させることができません。私はGoogleの開発ツールを試してみましたが、実際にその理由を見つけることはできません。

.wrapper{ 
    width:80%; 
    margin:0 auto; 
} 
.footer{ 
    margin:0 auto; 
    text-align:center; 
} 

HTML

<div class="row footer"> 
      <div class="wrapper clearfix"> 
       <div class="col-md-2 "> 
        <ul> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
        </ul> 
       </div> 
       <div class="col-md-2"> 
        <ul> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
        </ul> 
       </div> 
       <div class="col-md-2"> 
        <ul> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
        </ul> 
       </div> 
       <div class="col-md-2"> 
        <ul> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
        </ul> 
       </div> 
      </div> 
     </div> 

Answer 1

使用

.footer ul { 
    display: grid; 
    justify-content: center; 
} 

demo