5

I find a tutorial about bootstrap grid, but it was written in bootstrap1.x. Now I want to use bootstrap3 to achieve the same effect. The doc says using .img-thumbnail instead of .media-grid, but it seems still not work. What I want is something like this: enter image description here

The 1.x version is:

<ul class="media-grid">
            <li>
                <a href="#">
                    <img src="http://placehold.it/290x200" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/290x200" />

                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/290x200" />
                </a>
            </li>

    <!-- row of 4 thumbnails -->
            <li>
                <a href="#">
                    <img src="http://placehold.it/210x140" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/210x140" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/210x140" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/210x140" />
                </a>
            </li>       

        </ul><!-- end media-grid -->
davidkonrad
  • 83,997
  • 17
  • 205
  • 265
jason
  • 1,621
  • 6
  • 21
  • 39

2 Answers2

10

The .img-thumbnail class is applied to images so they get that rounded border style, it's not a direct replacement for .media-grid, also if you want the images to be wrapped in a link then you're better off using the .thumbnail class on the link itself as described here.

To build the actual grid you need to use Bootstrap 3's new grid system, your example would look like this:

<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
            <img src="http://placehold.it/400x200" alt="..." />
            </a>
        </div>
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
            <img src="http://placehold.it/400x200" alt="..." />
            </a>
        </div>
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
            <img src="http://placehold.it/400x200" alt="..." />
            </a>
        </div>
        <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="http://placehold.it/300x150" alt="..." />
            </a>
        </div>
          <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="http://placehold.it/300x150" alt="..." />
            </a>
        </div>
         <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="http://placehold.it/300x150" alt="..." />
            </a>
        </div>
         <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="http://placehold.it/300x150" alt="..." />
            </a>
        </div>
    </div>
</div>

Here's a demo fiddle

And here's another fiddle if you don't need the links, just the thumbnail grid

omma2289
  • 54,161
  • 8
  • 64
  • 68
  • thanks for your reply. Using div to achieve is fine, but does it possible to achieve by ul element? – jason Sep 22 '13 at 06:39
  • check [this](http://startbootstrap.com/template-overviews/thumbnail-gallery/) live demo for thumbnail grid, hope helps – Shaiju T Apr 29 '15 at 09:40
0
<div class="container">
<div class="row">
    <div class="col-xs-4">
       Some Image
    </div>
    <div class="col-xs-4">
        Some Image
    </div>
    <div class="col-xs-4">
       Some Image
    </div>
    <div class="col-xs-3">
       Some Image
    </div>
    <div class="col-xs-3">
       Some Image
    </div>
    <div class="col-xs-3">
       Some Image
    </div>
    <div class="col-xs-3">
       Some Image
    </div>
</div>

wali
  • 615
  • 10
  • 24