Boostrap Newb

HTML & CSS
,
1

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?

2

Eureeka!! I figured it out.

Apparently Bootstrap columns don’t work with li tags instead of section/span/div tags. The below gives the effect I want just fine!

    <ul class="row" id="gallery">


      <section class="col-xs-12 col-md-4">
        <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>
      </section>


      <section class="col-xs-12 col-md-4">
        <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>
      </section>


      <section class="col-xs-12 col-md-4">
        <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>
      </section>

      <section class="col-xs-12 col-md-4">
        <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>
      </section>

      <section class="col-xs-12 col-md-4">
        <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>
      </section>

      <section class="col-xs-12 col-md-4">
        <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>
      </section>


    </ul>

  </section> <!-- END CONTAINER  -->
2 Likes
3

<ul class="row" id="gallery">

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.

Cheers

4 Likes
4

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.

3 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.