Removing this annoying white background from thumbnails in Bootstrap 3

Question

I created a small piece of code where it shows 4 sketches in a line of equal grid width.

.row-content-3 { background-color: rgba(0,0,0,0.8) !important; color: #fff; margin:0px auto; padding: 50px 0px 50px 0px; min-height:200px; } 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row row-content-3"> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="thumbnail"> <a href="#"> <img src="http://www.theo-android.co.uk/github-images/fair1.png" class="img-circle" alt="Larissa fair"> </a> </div> </div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="thumbnail"> <a href="#"> <img src="http://www.theo-android.co.uk/github-images/fair2.png" class="img-circle" alt="Larissa fair"> </a> </div> </div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="thumbnail"> <a href="#"> <img src="http://www.theo-android.co.uk/github-images/fair3.png" class="img-circle" alt="Larissa fair"> </a> </div> </div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="thumbnail"> <a href="#"> <img src="http://www.theo-android.co.uk/github-images/fair4.png" class="img-circle" alt="Larissa fair"> </a> </div> </div> </div> 

If you run the code, you will notice that there is a white background that needs to be removed. I put this simple css code, but it did not work: (.

 .thumbnail { border: 0; } 

Also I give you jsfiddle .

Any ideas

Thanks Theo.

Answer 1

If I'm not mistaken, you only need to remove the white background from the back circle.

I added this

 .thumbnail { border: 0; background: transparent; } 

And you also see that there is a window shadow. You can remove this using

 box-shadow: none; 

Updated script: https://jsfiddle.net/udgw71no/6/

Answer 2

Specify background color as transparent for thumbnail class

 .thumbnail { border: 0; background-color:transparent; } 

Updated script: https://jsfiddle.net/affaz/udgw71no/8/

Answer 3

Looking for this?

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

Demo

Answer 4

remove the sketch background, but for it to work.

 .row-content-3 { background-color: rgba(0,0,0,0.8) !important; color: #fff; margin:0px auto; padding: 50px 0px 50px 0px; min-height:200px; } .thumbnail { background: none !important; border: 0 !important; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row row-content-3"> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="thumbnail"> <a href="#"> <img src="http://www.theo-android.co.uk/github-images/fair1.png" class="img-circle" alt="Larissa fair"> </a> </div> </div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="thumbnail"> <a href="#"> <img src="http://www.theo-android.co.uk/github-images/fair2.png" class="img-circle" alt="Larissa fair"> </a> </div> </div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="thumbnail"> <a href="#"> <img src="http://www.theo-android.co.uk/github-images/fair3.png" class="img-circle" alt="Larissa fair"> </a> </div> </div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="thumbnail"> <a href="#"> <img src="http://www.theo-android.co.uk/github-images/fair4.png" class="img-circle" alt="Larissa fair"> </a> </div> </div> </div> 

Answer 5

Setting up the following styles should do this:

 .thumbnail { background-color: transparent; border: none; }