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 -->
FYI: <ul> tag expects to have only <li> tags as direct children, so the <ul> tag in the preceeding example is invalid and should be replaced with a <div> or other block element as needed.
Congratulations on discovering the solution on your own.
And THANK YOU for posting your solution for anyone whom - in the future - may come across this post as a result of facing a similar problem.