Twitter Bootstrap Question posted in

"col-xs-12 col-sm-6 col-md-4 col-lg-3" with col-xs-12 center of page – Twitter bootstrap

I have a standard loop for a photo gallery and I am using col-xs-12 col-sm-6 col-md-4 col-lg-3 which gives me a 4 image across on desktop, scaling down to a single photo on mobile.

It all works good.

The one thing that is causing me vexation is that I want the single-across photo, when viewing on mobile devices, to be center aligned on the page, but they are all left aligned.

So here is some basic pseudo of what I am doing:

<div class="container">
    <div class="row">
        <?php
        foreach ($photos AS $photo) {
        ?>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <img src="pathtoimage">
        </div>
        <?php
        }
        ?>
    </div>
</div>

Again, the actual looping part, and the four across down to one across all work perfectly, I am just getting stuck on how to get the mobile view (col-xs-12) to be centered in the middle of the page, not left aligned.

Anybody know what the bootstrap magic to make this happen?

Tags:

2

Answers


  1. 0

    Use text-center class to center image

    Login or Signup to reply.
  2. 0

    You can center the images with some CSS. I created a fiddle

    If you want the images to be centered only add certain breakpoints than you can use media queries to center them at certain breakpoints.

    For example, to ccenter the images only on small screens:

    @media(max-width: 768px) {
  .gallery-image img {
    display: block;
    margin: 0 auto;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search