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.
[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]
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]
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]
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.
Leave a Reply