Bootstrap Images

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.

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

Run Bootstrap Rounded Images Demo

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>

Run Bootstrap Circle Images Demo

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>

Run Bootstrap Thumbnail Images Demo

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.

Run Bootstrap Responsive Images Demo

Rounded Images

Circle Images

Thumbnail Images

Responsive Images

About Sutha Kaliannan

Reader Interactions

Leave a Reply Cancel reply