イメージをブートストラップ行にセンタリングする

Question

ブートストラップを使用して応答する行に表示するイメージを一覧表示する方法を理解しようとしています。これはこの投稿用に変更された汎用コードです。今のところ、イメージは行の左側に表示され、中央には表示されません。また、センターブロッククラスで画像に追加することも試みました。それは物事を改善しませんでした。

他の提案はありますか？

<div class="text-center"> 
    <div class="row"> 
     @foreach ($images as $count => $asset) 
      <div class="col-6 col-sm-4 col-md-2"> 
       <div class="project-image-container"> 
        <a href=""> 
         <img src="images/*" class="img-fluid" /> 
        </a> 
       </div> 
      </div> 
     @endforeach 
    </div> 
</div> 

Answer 1

ラッパーdivにtext-centerクラスを追加します。

<div class="text-center"> 
    <div class="row"> 
     @foreach ($images as $count => $asset) 
      <div class="col-6 col-sm-4 col-md-2"> 
       <div class="project-image-container text-center"> 
        <a href=""> 
         <img src="images/*" class="img-fluid" /> 
        </a> 
       </div> 
      </div> 
     @endforeach 
    </div> 
</div> 

ここでフィドルです：https://jsfiddle.net/vu1e9ba8/