Getting rid of Twitter Bootstrap thumbnail border

Question

I'm trying to get rid of the default thumbnail thin grey border in Twitter Bootstrap.

I can target the borders, for example if I use:

.thumbnails > li { border:1px solid red; }

all the thumbnail borders change to red.

But if I use:

.thumbnails > li { border:0; }

it still leaves the borders with a thin grey line. I cannot get rid of that. I've tried to change the color to white (my background is white, so it could be a solution) but it doesn't work.

How can I get rid of that thin grey border?

Answer 1

Thumbnail borders are applied to the .thumbnail element, inside the <li>. Anyway, the "extra" thin line you talk about could be the box-shadow applied to that class.

So you can try:

.thumbnail {
    border: 0 none;
    box-shadow: none;
}

Answer 2

If the method advised by @albertedevigo doesn't work then try changing the class from 'img-thumbnail' to 'img-responsive'.

The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image.

HTML

    <div class="row no-pad">
          <div class="col-md-2"><img src="E:\VIPUL\Adobe Lightroom\Modified\Awesome.jpg" 
class="img-responsive"  alt="Awesome.jpg">
        </div>
       </div>

CSS

     .row.no-pad.img-responsive{
      margin-right:0px;
      margin-left:0px;
      border:none;
    }

Cheers!