What is the “thumbnail”


The image is wrapped with "thumbnail"
Why we should use that>
What does the thumbnail mean?


thumbnail is a class name. We are using that class name to help us apply styles ( using CSS rules) to some of our div elements.

If you want to see which CSS rules are being used:

  • get the bootstrap.css URL from your index.html file
  • use your web browser to go to that URL
  • search the page, ctrl-F (PC), cmd-F (Mac), for thumbnail


Thank you. I saw it.
But, why we don't set the size or margin in the <img>..</img> directly.
what the speciality of thumbnail.
(maybe my question is tricky>


How you choose to style your images will depend on your site.

Something like the following for every image in your site?

<img src="your link" width="360">

Or a CSS rule like:

.thumbnail {
    max-width: 360px;

There are arguments for both.

You are going to be using the .thumbnail CSS rules for many other things besides just width, here are some from bootstrap.css:

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
.thumbnail>img, .thumbnail a>img {
    margin-left: auto;
    margin-right: auto;
a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active {
    border-color: #428bca;
.thumbnail .caption {
    padding: 9px;
    color: #333;


You are so nice! Thank you very much.
And the answer is so detailed.
Initially , i thought the thumbnail in this step was the special use for combating images.
Now, I understand.