Home/ Questions/Q 8827253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T07:19:44+00:00

I’m trying to make an thumbnail gallery (2×2) with twitter bootstrap, but I’m not

  • 0

I’m trying to make an thumbnail gallery (2×2) with twitter bootstrap, but I’m not getting the desired effect. in 1st thumbnail of each line, from line 2, is applied to the left margin, making it only fits one image per line.

the problem

the code:

    <div class="row-fluid">
        <div class="span6">
            <h2 id="clients">Clients</h2>

            <div class="row-fluid">
                <ul class="thumbnails">
                    <li class="span6">
                        <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                    </li>
                    <li class="span6">
                        <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                    </li>
                    <li class="span6">
                        <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                    </li>
                    <li class="span6">
                        <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="span6">
            <h2 id="testiominals">Testemunhos</h2>

            <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <small>Someone famous <a href=""><cite title="Source Title">Source Title</cite></a></small>
            </blockquote>

            <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <small>Someone famous <a href=""><cite title="Source Title">Source Title</cite></a></small>
            </blockquote>

            <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <small>Someone famous <a href=""><cite title="Source Title">Source Title</cite></a></small>
            </blockquote>
        </div>
    </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What about multiple rows? Code below; fiddle here.

    <div class="row-fluid">
    <div class="span6">
        <h2 id="clients">Clients</h2>

        <!-- First Row of Thumbs -->
        <div class="row-fluid">
            <ul class="thumbnails">
                <li class="span6">
                    <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                </li>
                <li class="span6">
                    <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                </li>
            </ul>
        </div>

        <!-- Second Row of Thumbs -->
        <div class="row-fluid">
            <ul class="thumbnails">
                <li class="span6">
                    <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                </li>
                <li class="span6">
                    <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                </li>
            </ul>
        </div>
    </div>

    <div class="span6">
        <h2 id="testiominals">Testemunhos</h2>

        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <small>Someone famous <a href=""><cite title="Source Title">Source Title</cite></a></small>
        </blockquote>

        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <small>Someone famous <a href=""><cite title="Source Title">Source Title</cite></a></small>
        </blockquote>

        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <small>Someone famous <a href=""><cite title="Source Title">Source Title</cite></a></small>
        </blockquote>
    </div>
</div>​
    • 0