Please help with bootstrap thumbnail issue!

1

Hi guys,

Can anyone please let me know how to make the bootstrap thumbnail border fixed around the image.

I’ve got the grid set to : “col-xs-6 .col-xs-4” for each image and it looks fine when scaled to mobile size, but when I set it to full screen the thumbnail borders are way too big. I thought changing the grid to “col-md-6 .col-md-4” would fix but it hasn’t done anything…
I’ve also tried changing the border size in CSS but it has not done anything either…

any help would be appreciated!!

thanks!

this is the code

Craig Fisher

front end web developer

<div class="content1" 
     <a class="thumbnail">
        <img id="recent-pic1" src="http://lorempixel.com/g/400/200/">
     </a>

     
    </div>
    <div class="col-xs-6 .col-xs-6">
    

     <a class="thumbnail">
        <img id="recent-pic2" src="http://lorempixel.com/g/400/200/">
     </a>   
    </div>
  </div>
</div>

Screen Shot 2016-05-26 at 2.02.11 PM.png2880×1496 456 KB

2

@craigmark0 Can you post a link to your pen? The code you posted doesn’t make sense—it seems like it was only partially copied.

3

Okay, added stuff to make the code snippet work:
http://codepen.io/ChadKreutzer/pen/qZeVrj?editors=1100

As you can see, I added a recent-pics class to each of your images in the thumbnails then gave that class a width:100% property to make them fill their boxes.

4

Remove the . in front of col-xs-6 in your class callout and try changing it to col-md-3.

The . is used in the CSS stylesheets to identify it as a class.