CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Kevin Davis
Kevin Davis

Reputation: 2718

How to make content inside Bootstrap3 thumbnails bleed all the way to the edge?

See the image below. I'd like the content to extend all the way to the rounded corners.

Note that this content is not just an image and can include an overlay (.item-screen)

Markup looks like:

<div class="col-sm-6">
  <div class="thumbnail">
    <div class="item-picture">
      <a href="blah">
        <img src="blah" class="img-responsive"/>
      </a>
      <div class="item-screen"></div>
    </div>
  <div class="caption">dark picture</div>
  ...
</div>

enter image description here

Upvotes: 0

Views: 120

Answers (2)

Olaf Dietsche
Olaf Dietsche

Reputation: 74078

When you put together a simple example, and use some browser tools, you will see a small padding 4px applied to div.thumbnail. To extend the picture to the border, remove that padding 

div.thumbnail {
    padding: 0;
}

JSFiddle

If you want to keep the padding at the bottom, you can do 

div.thumbnail {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
}

and having an image with round corners 

<img src="..." class="img-rounded"/>

JSFiddle

Upvotes: 1

Kevin Davis
Kevin Davis

Reputation: 2718

Took another look after Olaf pointed out that I could remove the padding

I ended up with applying the following CSS:

.item a img {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 0px solid transparent;
}
.item .thumbnail { padding: 0px; }

I'd tried adding the border radius before, but until I realized you could make a transparent border it came out looking wonky

Upvotes: 0

Related Questions