Создаем галерею миниатюр на Bootstrap 3

Давайте взглянем на демо и подумаем, а что же мы можем сделать с этими убогими картинками. Давайте вспомним все то, что изучали ранее и применим на практике. Составим примерный план:

1. Сделаем таблицу с помощью col-xs-6
2. Сделаем отзывчивые картинки img-responsive
3. Применим класс thumbnail для создания рамки
4. И напоследок добавим класс caption к <p>, чтобы он был как подпись картинки и не прилипал к краям.

Вот что у нас получилось

<div class="row">
    <div class="col-xs-6">
        <div class="thumbnail">
           <img src="img/dog1.jpg" alt="" class="img-responsive">
            <p class="caption">James plays tug-o-war on the beach with Jasmine.</p>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="thumbnail">
            <img src="img/dog2.jpg" alt="" class="img-responsive">
            <p class="caption">Ninja Peter enjoys the sunshine with Lightning the Super Dog.</p> 
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-6">
        <div class="thumbnail">
            <img src="img/dog3.jpg" alt="" class="img-responsive">
            <p class="caption">Ellen and Henry play in the park with Sally.</p>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="thumbnail">
            <img src="img/dog4.jpg" alt="" class="img-responsive"> 
            <p class="caption">Julia, Dillon, and Scout watch morning cartoons.</p>
        </div>
    </div>
</div>

А на практике это выглядит вот так.

Скачать урок