CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Madhu G Nadig
Madhu G Nadig

Reputation: 122

Bootstrap. Removing the border around the thumbnail images

I used bootstrap thumbnail class to create a grid of clickable images. For some reason, they have a border and its annoying me.

HTML:

<div class = "the-grid">
<div class = "container">        
<div class = "row">
              <div class = "col-md-4">
                <div class = "thumbnail">
                    <image src = "Images/data.png"/>
                </div>
                 <div class = "thumbnail">
                    <image src = "Images/cloud.png"/>
                </div>
</div>
</div>
</div>

CSS: 

<style>
.the-grid{
background-color: #efefef;    
border-bottom: 1px solid #DBDBDB;
min-height: 100%;
}
.the-grid .row .thumbnail{
border: 0px;
box-shadow: none;
border-radius:0px;
background-color: #000;
}

.the-grid .row .thumbnail  img:hover {
 background-color: #000 !importantl        
</style>

Upvotes: 3

Views: 12631

Answers (6)

jeyglo
jeyglo

Reputation: 152

why dont you just add the border class like this...

<img class="img-thumbnail border border-0" src="photo_location..." alt="photo">

Upvotes: 1

Juliarman Umar
Juliarman Umar

Reputation: 1

If you using latest Bootstrap,

use class "img-thumbnail" on your img tag !

Example:

<img class ="img-thumbnail" src="Your_Path_Image" alt="">

& Add class "img-thumbnail" on your file custom CSS Bootstrap!

Example:

.img-thumbnail{
    background: none;
    border: none;
}

Upvotes: 0

Casey R
Casey R

Reputation: 1

After inspecting the element, the padding was what i needed to adjust on mine as well as the border to remove that box just in case anyone else runs into this.

thumbnail { padding: 0; border: 0; }

Upvotes: 0

Poetic Gibberish
Poetic Gibberish

Reputation: 41

You can override the default bootstrap thumbnail border setting by adding this to your CSS file:

.thumbnail {
border: 0;
}

You can also simulate this by inspecting the properties of a thumbnail in Chrome. Find .thumbnail properties and uncheck border. You will see it disappear from your image. Screenshot of .thumbnail Once you add the code to your CSS file. Re-inspect and you will see that the border property with a strikethrough. .thumbnail with no border

Upvotes: 4

Bennet G.
Bennet G.

Reputation: 585

Go into your bootstrap.min.css (if you have it local, otherwise you have to download it) and search for: ".thumbnail" and then delete the part where it says "border" or so.. Don't have any bootstrap version aviable otherwise I will say you where that is, sry.

Upvotes: 0

riogrande
riogrande

Reputation: 349

Just remove all border property's from .thumbnail and all borders will be removed

.the-grid .row .thumbnail{
box-shadow: none;
}

Upvotes: 1

Related Questions