Bootstrap Images
In this tutorial you will learn how to style images, creating thumbnails, grids of images and videos, and so on using Bootstrap.
Styling Images with Bootstrap
Images are very common in modern web design. So styling images and placing it properly on the web pages is very important for improving the user experience.
Using the Bootstrap built-in classes you can easily style images such as making the round cornered or circular images, or give them effect like thumbnails.
<img src="125x125.jpg" class="img-rounded" alt="Rounded Image">
<img src="125x125.jpg" class="img-circle" alt="Circular Image">
<img src="125x125.jpg" class="img-thumbnail" alt="Thumbnail Image">
— 上面示例的输出将如下所示：
Warning: The classes .img-rounded and .img-circle do not work in IE8 and lower versions due to lack of support for CSS border-radius property.
Creating Responsive Images and Videos
In Bootstrap you can make the images responsive too. Just add the class .img-responsive to the <img> tag. This class mainly applies the styles max-width: 100%; and height: auto; to the image so that it scales nicely to fit the containing element — in case if the width of the image is larger than the containing element itself.
<img src="kites.jpg" class="img-responsive" alt="Flying Kites">
<img src="sky.jpg" class="img-responsive" alt="Cloudy Sky">
<img src="balloons.jpg" class="img-responsive" alt="Hot Air Balloons">
Note: When making the responsive layouts consider making your images responsive too, otherwise if an image width is larger than the parent element's width in any case it will overflow and may break your layout.
You can also make the video or slideshow embedded in a web page responsive without affecting its original aspect ratio. The Bootstrap responsive embed classes can be applied directly to the <iframe>, <embed>, <video>, and <object> elements.
<!-- 16:9 aspect ratio --><div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div><!-- 4:3 aspect ratio --><div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>
In the above example, we've created the two responsive videos with two different aspect ratios (16:9 and 4:3) by adding the classes .embed-responsive-16by9 and .embed-responsive-4by3 to their containing blocks respectively and the class .embed-responsive-item to the descendant <iframe> element.
Tip: The aspect ratio of an image describes the proportional relationship between its width and its height. Two common videographic aspect ratios are 16:9 and 4:3.
Bootstrap Thumbnails
The Bootstrap thumbnail component is very useful for creating grids of images or videos, lists of products, portfolios, and much more. The following example will show you how to create thumbnails to showcase linked images.
<div class="container">
<div class="row">
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="125x125.jpg" alt="125x125">
</a></div><div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="125x125.jpg" alt="125x125">
</a></div><div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="125x125.jpg" alt="125x125">
</a></div><div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="125x125.jpg" alt="125x125">
</a></div></div></div>
— 上面示例的输出将如下所示：
You can also insert HTML content like headings, paragraphs, or buttons into thumbnails.
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="thumbnail">
<img src="avatar.jpg" alt="Sample Image">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Thumbnail description…</p>
<p><a href="#" class="btn btn-primary">Share</a> <a href="#" class="btn btn-default">Download</a></p>
</div></div></div><div class="col-xs-6">
<div class="thumbnail">
<img src="avatar.jpg" alt="Sample Image">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Thumbnail description…</p>
<p><a href="#" class="btn btn-primary">Share</a> <a href="#" class="btn btn-default">Download</a></p>
</div></div></div></div></div>
Tip: The thumbnails component uses existing grid classes like .col-xs-*, .col-sm-*, .col-md-*, .col-lg-*, etc. for controlling the dimensions of thumbnails.
