I am new to bootstrap. I am struggling to control them at a smallest viewport setting. All I want is to make the image appear all the way across the viewport when it’s less than 768px. Here is my code. My website is running off my desktop at the moment:
<ul class="row" id="gallery">
<li class="col-xs-12">
<a class="thumbnail" href="img/numbers-01.jpg">
<img class="img-responsive" src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
<li class="col-xs-12">
<a class="thumbnail" href="img/numbers-02.jpg">
<img class="img-responsive" src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li class="col-xs-12">
<a class="thumbnail" href="img/numbers-06.jpg">
<img class="img-responsive" src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li class="col-xs-12">
<a class="thumbnail" href="img/numbers-09.jpg">
<img class="img-responsive" src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li class="col-xs-12">
<a class="thumbnail" href="img/numbers-12.jpg">
<img class="img-responsive" src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
<li class="col-xs-12">
<a class="thumbnail" href="img/numbers-12.jpg">
<img class="img-responsive" src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section> <!-- END CONTAINER -->
Can anyone help?