JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Bootstrap Images

June 17, 2014 by Sutha Kaliannan Leave a Comment

This tutorial explains how to style images, creating thumbnails, text and so on using Bootstrap framework. Images are common in the web designing field. So styling images and placing it on the web pages makes user experience much better. Bootstrap provides built in three classes to style images such as rounded image, circular image and thumbnail image.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

Rounded Images

Below script shows images in the form of rounded corner. The Bootstrap uses img-rounded class which sets border-radius property to 6px to give rounded corner to the associated images.

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Rounded Images</h2>
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300×214.jpg" height="200" width="200" alt="amazing" class="img-rounded">
<image src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300×300.jpg" alt="my_image1" height="200" width="200" class="img-rounded"/>
<image src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300×210.jpg" alt="my_image2" height="200" width="200" class="img-rounded"/>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Rounded Images Demo

Rounded Images

Circle Images

Bootstrap provides img-circle class which creates image with circle shape or round cornered. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Circular Images</h2>
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300×214.jpg" height="200" width="200" alt="amazing" class="img-circle">
<image src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300×300.jpg" alt="my_image1" height="200" width="200" class="img-circle"/>
<image src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300×210.jpg" alt="my_image2" height="200" width="200" class="img-circle"/>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Circle Images Demo

Circular Images

Thumbnail Images

Bootstrap provides img-thumbnail class which is used for creating grid of images, gives thumbnail like styles to images. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Thumbnail Images</h2>
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300×214.jpg" height="200" width="200" alt="amazing" class="img-thumbnail">
<img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300×300.jpg" alt="my_image1" height="150" width="200" class="img-thumbnail">
<img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300×210.jpg" alt="my_image2" height="200" width="200" class="img-thumbnail">
</div>
</body>
</html>
[/code]

  • Run Bootstrap Thumbnail Images Demo

Thumbnail Images

Responsive Images

We can make image to be responsive friendly by using Bootstrap’s img-responsive class. The following is an example with this class:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
.img-responsive{
display:block;
height:auto;
margin-bottom:15px;
}
</style>
</head>
<body>
<div class="container">
<h2>Responsive Images</h2>
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300×214.jpg" height="200" width="200" alt="amazing" class="img-responsive">
<img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300×300.jpg" alt="my_image1" height="150" width="200" class="img-responsive">
<img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300×210.jpg" alt="my_image2" height="200" width="200" class="img-responsive">
</div>
</body>
</html>
[/code]

The .img-responsive class defines images must be displayed as block level elements, height of the image and width of the image to 100% which scales much better to parent element and it restrict the image according to the devices on which it is being rendered. The margin-bottom property sets the bottom margin of an element on the web page.

  • Run Bootstrap Responsive Images Demo

Responsive Images

Filed Under: Bootstrap Tagged With: Bootstrap Basics

About Sutha Kaliannan

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved