Bootstrap Images In this tutorial you will learn how to style images,Bootstrap Images In this tutorial you will learn how to style images, Bootstrap modeling pictures Image of modern web design is very common. Such shape of the image and put it correctly on the page is used to improve the user experience is very important. Built-in classes can easily use the boot image style, such as the production, rounded or circular image, or to their favorite thumbnail influence.

<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">

The output of the above example will look something like this:
Bootstrap Image Styling

 

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>

Bootstrap Thumbnails
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>