Bootstrap grid system for thumbnail images

Bootstrap grid system for thumbnail images
0

#1

Hello,
I’m working on my first independent project (tribute page). I’m trying to get three thumbnail images to line up using bootstraps grid system. When I put all the individual images nested inside a <div class="row"> the first image sits in a row by itself and the other two line up next to each-other in a row. If I remove the <div class="row"> then its works. However this is not what all the instructions say to do. What am I missing here?

See the Pen FCC Project Tribute Page by Jay (@ajwillis) on CodePen.


#2

Try this:

  <div class="row">
     <div class="col-xs-4">
      <img class="img-thumbnail" src="http://www.pawculture.com/uploads/norwegian-forest-cat-main.jpg" alt="a picture of a cat">
    </div>
    <div class="col-xs-4">
      <img class="img-thumbnail" src="https://i.pinimg.com/originals/06/6a/c1/066ac14c7ea84b60917e0c93ee7dbd7c.jpg" alt="a picture of a cat">
    </div>
    <div class="col-xs-4">
      <img class="img-thumbnail" src="http://kittentoob.com/wp-content/uploads/2014/10/nor1-540x303.jpg">
    </div>  
  </div>

#3

Thanks! That worked.


#4

Your solution would have worked also, but you needed to delete the three extra </div> tags at the end of each img tag. That was causing the line to wrap. My solution just removes the extra div you put each img in, to make the code work the same but with less code.