Bootstrap Images
In this section we will demonstrate the use of images in bootstrap. In bootstrap we have three different classes that can be used for styling the images. Consider the following table in which we have defined these classes:
Classes | Description |
.image- rounded | This class is used to add a border to round the corner of the image. |
.image- circle | This class is used to make the entire image in a circle. |
.image- thumbnail | This class is used to add a gray color border to the image and padding to the image. |
Consider the following example in which we have sued all these classes for images in bootstrap:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<scriptsrc=”/scripts/jquery.min.js”></script>
<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<imgsrc = “http://404846152.r. upxcdn. net/ br/ wpcontent/uploads/2015/10/bootstrap-logo1.png” class = “img-rounded”><br>
<imgsrc = “http://404846152.r.upxcdn.net/br/wp-content/uploads/2015/10/bootstrap-logo1. png” class = “img-circle”><br>
<imgsrc = “http://404846152.r.upxcdn.net/br/wp-content/uploads/2015/10/bootstrap-logo1.png”
class = “img-thumbnail”>
</body>
</html>
The above code will generate the following result:
OUTPUT: