Bootstrap 3 Images

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!

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.

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

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>

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.