Question

I am building a page using Twitter Bootstrap. To display an image gallery, I use a setup like this:

<div class="container">
    <div class="row">
        <div class="span1">
            <a href="#">
                <img src="http://www.placehold.it/50x50" />
            </a>
        </div><!-- /.span -->
        <div class="span1">
            <a href="#">
                <img src="http://www.placehold.it/50x50" />
            </a>
        </div><!-- /.span -->
        <div class="span1">
            <a href="#">
                <img src="http://www.placehold.it/50x50" />
            </a>
        </div><!-- /.span -->
    </div><!-- /.row -->
</div><!-- /.container -->

Fiddle

Now I want some kind of polaroid effect on these image. To do this, I add a class photo which holds the a and img. Like this:

<div class="span1">
    <div class="photo">
        <a href="#">
            <img src="http://www.placehold.it/50x50" />
        </a>
    </div>
</div><!-- /.span -->

Fiddle

As you can see, adding this class shifts the grid somehow. That’s why the grid is not centered anymore. Is there anything I can do to fix this?

The best would be if the span gets a background-color and the image sits centered in the span. I believe using padding I then can control the width of the border – this is the initial idea, but it’s not working. How would you create an effect like this. Using a border-iage also shifts the grid.

I added some screenshots:

Here the first example – visually centered

And the second example – clearly shifted

Answer 1

Solved the problem. Forgot that I had added width and height to .photo. After removing these values, it’s working like it should.