get rid of white space in thumbnail - css

Question

I'm trying to get rid of extra white space in an img-thumbnail. I adjusted padding in bootstrap.css but nothing changed ! How can I force it to remove this big space ?
bootstrap.css
.img-thumbnail {
display: inline-block;
max-width: 100%;
padding: 3px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
view page
<% #store.products.each_with_index do |product,index| %>
<div class="col-sm-4">
<div class="img-thumbnail">
<%= link_to image_tag(root_url + "/images/" + product.filename, size: "200x150", alt: product.filename), product %>
<div class="caption">
<h4 class="pull-right">$ <%= product.price %></h4>
<h4><%= product.name %></h4>
<div id="star-img">
<% if current_user != product.store.user %>
<%= rating_for product, "overall", :enable_half => false,:disable_after_rate => false %>
<% end %>
</div>
</div>
</div>
</div>
<%end %>
A screen shot http://postimg.org/image/4ih2jd481/
how can I decrease padding between each thumbnail as well. I tried to add right-padding and set a low number of pixels, it would not work either.

Answer 1

It's most likely the columns that need to have any padding reduced. You can use CSS Attribute Selectors to accomplish this. See MDN for more information. See the second working example labeled Thumbnail Example that applies specifically to your issue.
Basic Example:
.some-class > [class*='red'] {
background: red;
}
.another-class {
background: green;
}
<div class="some-class">
<div class="no-class">
NOT RED
</div>
<div class="red">
RED
</div>
<div class="another-class">
GREEN
</div>
<div class="red">
RED
</div>
<div class="no-class">
NOT RED
</div>
<div class="no-class">
NOT RED
</div>
<div class="another-class">
GREEN
</div>
</div>
Sidenote: You may want to consider using the thumbnail class instead of img-thumbnail since it appears to cover your use case. And you may need to clear your columns if the thumbnails are dynamically generated and vary in height.
Thumbnail Example:
body {
padding-top: 25px;
}
.thumbnail-gutter > [class*='col-'] {
padding-right: 4px;
padding-left: 4px;
}
.thumbnail-gutter .thumbnail {
border: 4px solid #f00;
}
#media (min-width: 768px) and (max-width: 1199px) {
.thumbnail-gutter .col-sm-4:nth-child(3n+1) {
clear: left
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row thumbnail-gutter">
<div class="col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/750x375/000/fff">
<div class="caption">
<h4 class="pull-right">$100.00</h4>
<h4>ONE NAMENAMENAME</h4>
<div id="star-img">
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/750x375/ff0/fff">
<div class="caption">
<h4 class="pull-right">$5.00</h4>
<h4>TWO NAMENAME NAME</h4>
<div id="star-img">
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/750x375/f00/fff">
<div class="caption">
<h4 class="pull-right">$55.00</h4>
<h4>THREE NAMENAME</h4>
<div id="star-img">
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/750x375/ff0/fff">
<div class="caption">
<h4 class="pull-right">$5.00</h4>
<h4>FOUR NAMENAME NAMENAME NAMENAME</h4>
<div id="star-img">
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/750x375/000/fff">
<div class="caption">
<h4 class="pull-right">$55.00</h4>
<h4>FIVE NAMENAME</h4>
<div id="star-img">
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/750x375/f00/fff">
<div class="caption">
<h4 class="pull-right">$5.00</h4>
<h4>SIX NAMENAME NAMENAME NAMENAME NAMENAME</h4>
<div id="star-img">
<span class="fa fa-star-o"></span>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/750x375/444/f00">
<div class="caption">
<h4 class="pull-right">$55.00</h4>
<h4>SEVEN NAMENAME NAMENAME</h4>
<div id="star-img">
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
</div>
</div>
</div>
</div>
</div>
</div>