Bootstrap: creating a grid of icons

Question

I need to create a grid of icons which does NOT stack when viewed on mobile. I've this setup right now:

<div class="row-fluid">
    <ul class="thumbnails">
        <li class="span3">
            <div class="thumbnail">
                <div class="caption">Element1
                    <br />
                </div>
                <img src="http://placehold.it/70x70" alt="Element1" />
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail">
                <div class="caption">Element2
                    <br />
                </div>
                <img src="http://placehold.it/70x70" alt="Element2" />
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail">
                <div class="caption">Element3
                    <br />
                </div>
                <img src="http://placehold.it/70x70" alt="Element3" />
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail">
                <div class="caption">Element4
                    <br />
                </div>
                <img src="http://placehold.it/70x70" alt="Element4" />
            </div>
        </li>
    </ul>
</div>
</div>

But when the output window is below a certain width all the icons are stacked one above the other. I'd like to have them inline since they're very small, like on the desktop version. What's the best way to do that?

One more request, but less important: icons number may vary. They can be from 1 to 4 or even more (no problem in displaying 2 rows). Is there a bootstrap (or css) way to have them centered when they're less than 4 in a row?

jsFiddle link

Answer 1

Your best bet is to not use bootstrap classes for this.

HTML

<div class="thumbnails">
    <div class="thumbnail">
        <div class="caption">Element1</div>
        <img src="http://placehold.it/70x70" alt="Element1" />
    </div>
    <div class="thumbnail">
        <div class="caption">Element2</div>
        <img src="http://placehold.it/70x70" alt="Element2" />
    </div>
    <div class="thumbnail">
        <div class="caption">Element3</div>
        <img src="http://placehold.it/70x70" alt="Element3" />
    </div>
    <div class="thumbnail">
        <div class="caption">Element4</div>
        <img src="http://placehold.it/70x70" alt="Element4" />
    </div>
</div>

CSS

.thumbnails {text-align: center;}
.thumbnails .thumbnail {display: inline-block; margin: 0 5px;}

DEMO

http://jsfiddle.net/hap4vvex/

Note: The thumbnails don't take up the full width, but they do center with any number