Давайте взглянем на демо и подумаем, а что же мы можем сделать с этими убогими картинками. Давайте вспомним все то, что изучали ранее и применим на практике. Составим примерный план:
- Сделаем таблицу с помощью col-xs-6
- Сделаем отзывчивые картинки img-responsive
- Применим класс thumbnail для создания рамки
- И напоследок добавим класс 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>
А на практике это выглядит вот так.