How to mount grid in Bootstrap 3 for small images

Question

I’m trying to adapt a grid in Bootstrap 3 for small images with the possibility of the page being responsive, these images are inserted via form as .png and sent to banco de dados and in a specific folder in my hosting, but the adaptation of what I have is not getting as it should, I set up a grid with an option I got, what I did was this:

Thumbs page

And what I really need is this:

Página Modelo

No matter how hard you try the changes have no effect.

Answer 1

Its problem is because the bootstrap has a grid limit of 12 columns. That is, you won’t get more than that using the bootstrap grid.

One solution would be to use a Calc to do this split. Let’s say you want 20 thumbnails on the same line, you can use it as follows:

<div class="minhalista">
    <div class="thumb">00</div>
    //[.. repita suas thumbs ..]
</div>

And in css:

.thumb {
    display:inline-block;
    width: calc(100%/20);
}

Thus, its total width would be divided equally by 20 columns. Take this example: http://jsfiddle.net/c0nxhjwz/

Important: Note that this type of layout may become complex or not work properly on smaller screen. Just be careful with this.