Bootstrap 3 Images

by admin · Published March 26, 2017 · Updated March 27, 2017

Use of graphic images has increased a lot with social media boom along with animated GIF’s. In Bootstrap there are provisions for styling with respect to being responsive and giving border shapes. Bootstrap thumbnails are also good way for improving the page outlook. Lets start with responsive images!

Tip Suppose you have image with width 500px and when viewed in mobile browser it will break the layout otherwise if you haven’t made it responsive already!

Bootstrap 3 Responsive Images

For making images responsive in Bootstrap 3 you have to add .img-responsive class to <img> tag. This specific class has CSS attributes of max-width:100% height:auto and display:block. When applied that image scale nicely to the parent element.

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

Try it Editor

Note : If you need to center images use .center-block rather than .text-center

Bootstrap 3 Image Shapes

There are basically 3 border shapes you can assign to images and you have to add specific classes to them.

Round Image (.img-rounded)
Circular Image(.img-circle)
Thumbnail Image(.img-thumbnail)

Below image provides their view in the practical. These specific classes needs to added directly into their img tag respectively.

<img src="#" class="img-rounded" alt="Rounded Image">
<img src="#" class="img-circle" alt="Circular Image">
<img src="#" class="img-thumbnail" alt="Thumbnail Image">

Try it Editor

Note : classes .img-rounded and .img-circle have no support with IE version 8 and lower due to CSS border-radius property.

Bootstrap 3 Thumbnail Image

There are also default markup for images using class thumbnail only. Adding this (.thumbnail) specific class to the parent element will give the desired effect. They play important role when you are using images with Bootstrap 3 Grid System.

	<div class="container">
      <h3 class="text-center">Bootstrap 3 - Thumbnail Image example</h3>
 <div class="row">
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
            <img src="../wp-content/uploads/2017/03/demo-125.png"/>
            </a>
        </div>
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
            <img src="../wp-content/uploads/2017/03/demo-125.png"/>
            </a>
        </div>
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
            <img src="../wp-content/uploads/2017/03/demo-125.png"/>
            </a>
        </div>
        <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="../wp-content/uploads/2017/03/demo-125.png"/>
            </a>
        </div>
          <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="../wp-content/uploads/2017/03/demo-125.png"/>
            </a>
        </div>
         <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="../wp-content/uploads/2017/03/demo-125.png"/>
            </a>
        </div>
         <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="../wp-content/uploads/2017/03/demo-125.png"/>
            </a>
        </div>
    </div>
</div>

Try it Editor

Bootstrap 3 Thumbnail Grid

When designing layout for websites we prefer to use thumbnail as grids which are part of almost every bootstrap template online. Here below we are showing you demo bootstrap thumbnail grid with example.

Try it Editor

Bootstrap 3 Images