Java Tutorial Blog

Bootstrap Images

//  by 

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:

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.

 <!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-300x214.jpg" height="200" width="200" alt="amazing" class="img-rounded">
   <image src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg" alt="my_image1" height="200" width="200" class="img-rounded"/>
   <image src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg" alt="my_image2" height="200" width="200" class="img-rounded"/>
</div>
</body>
</html>

Rounded Images

Circle Images

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

<!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-300x214.jpg" height="200" width="200" alt="amazing" class="img-circle">
   <image src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg" alt="my_image1" height="200" width="200" class="img-circle"/>
   <image src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg" alt="my_image2" height="200" width="200" class="img-circle"/>
</div>
</body>
</html>

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:

<!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-300x214.jpg" height="200" width="200" alt="amazing" class="img-thumbnail">
   <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg" alt="my_image1" height="150" width="200" class="img-thumbnail">
   <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg" alt="my_image2" height="200" width="200" class="img-thumbnail">
</div>
</body>
</html>

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:

<!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-300x214.jpg" height="200" width="200" alt="amazing" class="img-responsive">
   <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg" alt="my_image1" height="150" width="200" class="img-responsive">
   <img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg" alt="my_image2" height="200" width="200" class="img-responsive">
</div>
</body>
</html>

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.

Responsive Images

About Sutha Kaliannan