Images form backbone of the visual impact and aesthetics of a website. A picture is worth a thousand words. This idiom alone is sufficient enough to emphasize the importance of images in your website. Like other element, bootstrap images come with myriad of styling options. This article explains how bootstrap images are implemented in websites and how we can achieve different image affects via bootstrap image classes. Take a look at the following example.
You can round the corner of your images via “img-rounded” class inside the opening tag the “img” element. This adds small round corners around the image giving it a smooth look. Take a look at the following example.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<img src="http://www.imagesource.com/Doc/IS0/Media/TR3_WATERMARKED/1/1/4/4/IS09A6IA1.jpg" class="img-rounded" alt="Girl Running" width="500" height="400">
</body>
</html>
When you open the above page in browser you should see an image with the rounded corners.
You can convert any image to circle using the “img-circle” class. Take a look at the following example.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<img src="http://www.imagesource.com/Doc/IS0/Media/TR3_WATERMARKED/1/1/4/4/IS09A6IA1.jpg" class="img-circle" alt="Girl Running" width="400" height="400">
</body>
</html>
Now, when you open the above webpage in the browser, you should see image in circular form.
You can create responsive images via Bootstrap using “img-responsive” class. Responsive images change their size with respect to the size of the browser in which they are viewed. Take a look at the following example.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<img src="http://www.imagesource.com/Doc/IS0/Media/TR3_WATERMARKED/1/1/4/4/IS09A6IA1.jpg" class="img-responsive" alt="Girl Running" width="500" height="400">
</body>
</html>
Now, when you open the above webpage in browser you should see the image in its default size. However, when you resize the browser and shrink it, the image shall also shrink. Increase the browser size will again increase the image size.
You can also display in image in the form of a thumbnail. To do so, add “img-thumbnail” class to any image you want to convert to thumbnail. Take a look at the following example.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<img src="http://www.imagesource.com/Doc/IS0/Media/TR3_WATERMARKED/1/1/4/4/IS09A6IA1.jpg" class="img-thumbnail" alt="Girl Running" width="100" height="80">
</body>
</html>