CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
ellu lila
ellu lila

Reputation: 29

What is the difference between Bootstrap img-responsive and thumbnail classes?

I have used both in two different projects, but i can't seem to see the difference between the two. img-responsive seems a but messier, but i still don't know what they do exactly and how they differ?

Project 1: class="thumbnail"
Project 2: class="img-responsive"

Upvotes: 0

Views: 746

Answers (2)

Mistalis
Mistalis

Reputation: 18279

From Bootstrap source code:

.img-responsive {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
       -o-transition: border .2s ease-in-out;
          transition: border .2s ease-in-out;
}

Upvotes: 1

mayersdesign
mayersdesign

Reputation: 5310

The .img-responsive class applies max-width: 100%, height: auto, and display:block to the image which effectively makes it scale to the width of its parent container.

The .img-thumbnail class applies styling to an image including padding and border

Upvotes: 1

Related Questions