Bootstrap thumbnail
Brief introduction
In this tutorial, you'll see how to use Bootstrap create thumbnails that image, video, text grid.
Thumbnails have a simple and flexible markup. Also, you can use the existing bootstrap css class such .span2 or .span3 to set the width and height of the thumbnail.
Why thumbnail
When creating the user experience on the Web, you often need to create an image or video grid. A good example is the need for product images of the company's website, at this time, it may be used thumbnails.
Examples of using the default thumbnail
Examples
<Div class = "container">
<Ul class = "thumbnails">
<Li class = "span3">
<a href="http://www.w3cschool.cc/php/php-tutorial.html" class="thumbnail">
<Img src = "../ bootstrap / php-thumb.png" alt = "php tutorial" width = "260" height = "180" />
</a>
</ Li>
<Li class = "span4">
<a href="http://www.w3cschool.cc/sql/sql-tutorial.html" class="thumbnail">
<Img src = "../ bootstrap / mysql-thumb.png" alt = "mysql tutorial" width = "300" height = "180" />
</a>
</ Li>
<Li class = "span5">
<a href="http://www.w3cschool.cc/js/js-tutorial.html" class="thumbnail">
<Img src = "../ bootstrap / js-thumb.png" alt = "js tutorial" width = "380" height = "180">
</a>
</ Li>
</ Ul>
<Hr>
</ Div> <-! / Container ->
<Ul class = "thumbnails">
<Li class = "span3">
<a href="http://www.w3cschool.cc/php/php-tutorial.html" class="thumbnail">
<Img src = "../ bootstrap / php-thumb.png" alt = "php tutorial" width = "260" height = "180" />
</a>
</ Li>
<Li class = "span4">
<a href="http://www.w3cschool.cc/sql/sql-tutorial.html" class="thumbnail">
<Img src = "../ bootstrap / mysql-thumb.png" alt = "mysql tutorial" width = "300" height = "180" />
</a>
</ Li>
<Li class = "span5">
<a href="http://www.w3cschool.cc/js/js-tutorial.html" class="thumbnail">
<Img src = "../ bootstrap / js-thumb.png" alt = "js tutorial" width = "380" height = "180">
</a>
</ Li>
</ Ul>
<Hr>
</ Div> <-! / Container ->
View online examples
You can customize the default thumbnail and add a paragraph, a title list or other type of HTML content.
Examples of custom thumbnails
Examples
<Div class = "container">
<Ul class = "thumbnails">
<Li class = "span5">
<Div class = "thumbnail">
<Img src = "../ bootstrap / shoes1.jpg" alt = "product 1">
<Div class = "caption">
<H5> Product detail </ h5>
<P> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </ P>
<P> <a href="#" class="btn btn-success"> Buy </a> <a href="#" class="btn btn-warning"> Try </a> </ p>
</ Div>
</ Div>
</ Li>
<Li class = "span5">
<Div class = "thumbnail">
<Img src = "../ bootstrap / shoes2.jpg" alt = "product 2">
<Div class = "caption">
<H5> Product detail </ h5>
<P> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </ P>
<P> <a href="#" class="btn btn-success"> Buy </a> <a href="#" class="btn btn-warning"> Try </a> </ p>
</ Div>
</ Div>
</ Li>
</ Ul>
<Hr>
<Footer>
<P> & copy; Company 2013 </ p>
</ Footer>
</ Div> <-! / Container ->
<Ul class = "thumbnails">
<Li class = "span5">
<Div class = "thumbnail">
<Img src = "../ bootstrap / shoes1.jpg" alt = "product 1">
<Div class = "caption">
<H5> Product detail </ h5>
<P> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </ P>
<P> <a href="#" class="btn btn-success"> Buy </a> <a href="#" class="btn btn-warning"> Try </a> </ p>
</ Div>
</ Div>
</ Li>
<Li class = "span5">
<Div class = "thumbnail">
<Img src = "../ bootstrap / shoes2.jpg" alt = "product 2">
<Div class = "caption">
<H5> Product detail </ h5>
<P> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </ P>
<P> <a href="#" class="btn btn-success"> Buy </a> <a href="#" class="btn btn-warning"> Try </a> </ p>
</ Div>
</ Div>
</ Li>
</ Ul>
<Hr>
<Footer>
<P> & copy; Company 2013 </ p>
</ Footer>
</ Div> <-! / Container ->
View online examples
Click here to download the tutorial to use all the HTML, CSS, JS and image files.