CODEWITHSUNDEEP
twitter-bootstrap
user3732216
user3732216

Reputation: 1589

Centering Images In Bootstrap Row

I'm trying to figure out how I can list images to be displayed in a responsive row using Bootstrap. This is generic code just modified for this post. Right now the images are displaying in the left so of the row and not centered. I've also tried adding in the center-block class to the image as well. That did not improve things.

Any other suggestions?

<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>

Upvotes: 0

Views: 44

Answers (1)

james00794
james00794

Reputation: 1147

Add the text-center class to the wrapper div.

<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>

Here's a fiddle: https://jsfiddle.net/vu1e9ba8/

Upvotes: 1

Related Questions