Как создать адаптивную полнорядную сетку из 12 одинаковых изображений с центрированным текстом?

Я застрял в течение нескольких часов и пытался решить следующую проблему и был бы признателен за ваш совет:

Я пытаюсь создать полностью реагирующую квадратную сетку равных изображений (400 пикселей x 400 пикселей каждый) с центрированным текстом на основе Bootstrap 3. Сетка должна использовать 100% ширины экрана и должна содержать 6 изображений в строке на большом экраны, которые идеально выравниваются друг с другом без каких-либо белых зазоров или отступов. На маленьких экранах размер должен резко уменьшаться, и каждая строка должна содержать только 2 изображения.

 +--------------------------------------------------------+
 |                     Fixed Navbar                       |
 |--------------------------------------------------------|
 |                                                        |
 |                        Header                          |
 |                                                        |
 +--------+---------+--------+---------+--------+---------+
 |        |         |        |         |        |         |
 |        |         |        |         |        |         |
 |        |         |        |         |        |         |
 |        |         |        |         |        |         |
 +-------------------------------------------------------->
 |        |         |        |         |        |         |
 |        |         |        |         |        |         |
 |        |         |        |         |        |         |
 |        |         |        |         |        |         |
 +--------v---------v--------v---------v--------v---------+
 |                                                        |
 |                                                        |
 |                        Content                         |
 |                                                        |
 |                                                        |
 +--------------------------------------------------------+

Проблема в том, что изображения выходят из естественной ширины строки 100%, создавая дополнительный промежуток, как вы можете видеть на картинке. Поэтому вам нужно прокрутить вправо, чтобы увидеть всю страницу, которая не предназначена.

HTML:

<div class="row">

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image1.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image2.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image3.jpgg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image4.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image5.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image6.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

</div>


<div class="row">

<div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image7.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image8.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image9.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image10.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image11.jpg" class="img-responsive" alt="Responsive image"></div>
    </div> 

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image12.jpg" class="img-responsive" alt="Responsive image"></div>
    </div> 

</div>

CSS:

.nopadding {
    padding-left:0;
    padding-right:0;
}